首页 > 代码库 > javascript与jQuery选项卡效果
javascript与jQuery选项卡效果
HTML结构：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡封装</title>
</head>
<body>
<div class="div1" id="div1">
<ul class="list">
<li class="active">首页</li>
<li>第二页</li>
<li>第三页</li>
<li>第四页</li>
</ul>
</div>
<div class="div2" id="div2">
<div class="div3" style="display:block">111111</div>
<div class="div4">222222</div>
<div class="div5">333333</div>
<div class="div6">444444</div>
</div>
</body>
</html>
CSS样式：
*{margin:0; padding:0}
#div1{width:500px; overflow:hidden; background:#f2f2f2;}
#div1 .list{width:100%; overflow:hidden;}
#div1 .list li{width:100px; height:40px; display:block; float:left; line-height:40px; text-align:center; cursor:pointer;}
li.active{background:#F00; color:#FFF;}
#div2{width:500px; height:300px; background:#09F;}
#div2 div{width:100%; height:100%; display:none;}
#box1{width:500px; overflow:hidden; background:#f2f2f2;}
#box1 ul{width:100%; overflow:hidden;}
#box1 ul li{width:100px; height:40px; display:block; float:left; line-height:40px; text-align:center; cursor:pointer;}
#box2{width:500px; height:300px; background:#09F;}
#box2 div{width:100%; height:100%; display:none;}
原生js代码：
<script type="text/javascript">
function Tab(id,tag,evt,id2,tag2){
var oId = document.getElementById(id);
var aTag = oId.getElementsByTagName(tag);
var oId2 = document.getElementById(id2);
var aTag2 = oId2.getElementsByTagName(tag2);
for(var i=0;i<aTag.length;i++){
aTag[i].index = i;
aTag[i][evt] = function(){
for(var i=0;i<aTag.length;i++){
aTag[i].className="";
aTag2[i].style.display = "none";
}
this.className="active";
aTag2[this.index].style.display = "block";
}
}
}
Tab(‘div1‘,‘li‘,‘onmouseover‘,‘div2‘,‘div‘); //调用方法
</script>
jQuery代码：
<script type="text/javascript">
function fnTab(id,element,evt,id2,element2){
$(‘#‘+id).find(element)[evt](function(){
$(this).addClass(‘active‘).siblings().removeClass(‘active‘);
$(‘#‘+id2).find(element2).eq($(this).index()).show().siblings().hide();
});
}
fnTab(‘div1‘,‘li‘,‘click‘,‘div2‘,‘div‘); //调用方法
</script>
无论是javascript原生代码还是jQuery代码，都是以封装函数的形式编写，这样有利于代码的拓展性和重用，使用起来也比较方便，只需要调用这个函数即可（当然使用jQuery源码时需要先导入jQuery库）。
javascript与jQuery选项卡效果