您的位置：首页 > Web前端 > JavaScript

javaScript实例：tab切换效果

2016-08-13 17:30 761 查看

我们平时经常会用到tab切换的效果，如下图：

这个效果很常见，用js就可以实现。

布局分析：

我们可以先让其中的一块内容显示，其他的内容先隐藏，当用户点击头部标签时，可以让当前内容隐藏，点击部分的内容显示出来。通过改变标签样式就可以实现。

html、css代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>tab切换效果</title>
<style>
#tab-nav{
overflow: hidden;
padding: 0;
margin: 0;
cursor: hand;
}
#tab-nav li{
float: left;
display: block;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #bbb;
border-bottom: none;
}
#tab-nav .on{
background: #ccc;
color: red;
}
#tab-con div{
display: none;
}
#tab-con .selected{
display: block;
width: 650px;
height: 300px;
padding: 30px;
line-height: 40px;
color: #c3c3c3;
border: 1px solid #c3c3c3;
}
</style>
</head>
<body>
<ul id="tab-nav" type="none">
<li class="on">number</li>
<li>String</li>
<li>boolean</li>
<li>undefined</li>
<li>null</li>
<li>object</li>
</ul>
<div id="tab-con">
<div class="selected">
number类型表示整型和浮点型，基本的数值字面量格式都是十进制。<br/>
此外，整数的字面量还可以是八进制和十六进制。<br/>
NaN即非数值，是number类型中的一个特殊值<br/>
NaN用于表示本来要返回一个数值的操作数，结果未返回数值的情况（这样不会报错）。<br/>
</div>
<div>
string类型用于表示由零个或多个16位unicode字符组成的字符序列，即字符串，由双引号或单引号表示。
</div>
<div>boolean类型有两个字面值：true 和 false<br/>
在js中所有类型值都有与这两个布尔值等价的值<br/>
1.特殊值undefined和null -- false<br/>
2.数字0和NaN -- false<br/>
3.空字符串 -- false<br/>
4.所有其他值 -- true<br/>
</div>
<div>undefined类型只有一个特殊值为undefined<br/>
声明变量未初始化时，这个变量的值就是undefined<br/>
</div>
<div>null类型只有一个特殊值为null<br/>
从逻辑角度来看，null表示空对象指针，所以typeof检测时返回object。<br/>
如果变量准备在将来用于保存对象，那么该变量最好初始化为null。<br/>
</div>
<div>JavaScript中对象其实就是一组数据和功能的集合。<br/>
var obj1=[1,2,3];<br/>
var obj2={name:'laowang'};<br/>

</div>
</div>
</body>
</html>

我用了两种思路来实现这个效果。

思路一

首先可以给每一个导航块标记一个index，这样等用户点击导航块时，先将所有的li与tab-con中的子div的className清空，然后再通过index标记，把点击的导航块和对应的div的className分别设置为on和selected。

<script>
var lis = document.getElementById("tab-nav").getElementsByTagName("li");
var divs = document.getElementById("tab-con").getElementsByTagName("div");
for(var i=0;i< lis.length;i++){
lis[i].index = i;
lis[i].onclick = function(){
for(var j=0;j<divs.length;j++){
lis[j].className="";
divs[j].className="";
}
lis[i].className = "on";
divs[this.index].className="selected";
}
}
</script>

思路二

每次点击事件后，对导航块进行一次遍历判断，找到本次点击的导航块之后，将这个导航块和对应的div的className改变，并且将其他的className清空。

<script>
var lis = document.getElementById("tab-nav").getElementsByTagName("li");
var divs = document.getElementById("tab-con").getElementsByTagName("div");
for(var i=0;i<lis.length;i++){
lis[i].onclick = function(){
for(var i=0;i<lis.length;i++) {
if (this == lis[i]) {
lis[i].className = "on";
divs[i].className = "selected";
}
else {
lis[i].className = "";
divs[i].className = "";
}
}
}
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航