原生js和jQuery写的网页选项卡特效对比
总的来说思路比较简单，就是先获取节点，然后对节点进行相应的处理,下面是完整的页面代码：
原生js：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<title>原生jstab</title>
<styletype="text/css">
.tab{
margin:10pxauto;
position:relative;
width:300px;
}
ul,li{
list-style-type:none;
padding:0;
margin:0;
font:13px/20pxSimSun,arial;
color:#333;
text-align:center;
}
.tabTltleulli{
float:left;
position:relative;
background:#fefefe;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#fefefe),to(#ededed));
padding:7px15px;
border:1px#dddsolid;
margin-right:-1px;
cursor:pointer;
}
.tabTltleulli.active{
background:#fff;
font-weight:bold;
}
.clearfix{
}
.clearfix:after{
display:block;
clear:both;
overflow:hidden;
content:"";
}
.tabConn{
border:1px#eeesolid;
position:relative;
height:100px
}
.tabConndiv{
position:absolute;
opacity:0;
filter:alpha(opacity=0);
padding:5px;
text-align:center;
width:100%;
}
.tabConndiv.current{
opacity:1;
filter:alpha(opacity=100);
}
</style>
</head>
<body>
<divid="tab"class="tab">
<divclass="tabTltle">
<ulclass="clearfix">
<liclass="active">标题一</li>
<li>标题二</li>
<li>标题三</li>
<li>标题四</li>
</ul>
</div>
<divclass="tabConn">
<divclass="current">aaaaaaaaaaaaaaa</div>
<div>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
<div>cccccccccccccccccccccccccccccccc</div>
<div>ddddddddddddddddddddddddddddd</div>
</div>
</div>
<scripttype="text/javascript">
(function(){
vartab=document.getElementById("tab");
vartabList=tab.getElementsByTagName("div")[0].getElementsByTagName("li");
vartabConn=tab.getElementsByTagName("div")[1].getElementsByTagName("div");for(vari=0;i<tabList.length;i++){
tabList[i].index=i;
tabList[i].onclick=function(){
showConn(this.index);
}
}
functionshowConn(_index){
varindex=_index;for(varj=0;j<tabList.length;j++){
tabList[j].className="";
tabConn[j].className="";
tabConn[j].style.opacity=0;
}
tabConn[index].className="current";
tabList[index].className="active";
}
})();
</script>
</body>
</html>
下面我们来看一下jQuery写的（css共用,需要引进jQuery库）：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<title>jQuerytab</title>
<scripttype="text/javascript"src="js/jquery-1.8.1.min.js"></script>
<styletype="text/css">
.tab{
margin:10pxauto;
position:relative;
width:300px;
}
ul,li{
list-style-type:none;
padding:0;
margin:0;
font:13px/20pxSimSun,arial;
color:#333;
text-align:center;
}
.tabTltleulli{
float:left;
position:relative;
background:#fefefe;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#fefefe),to(#ededed));
padding:7px15px;
border:1px#dddsolid;
margin-right:-1px;
cursor:pointer;
}
.tabTltleulli.active{
background:#fff;
font-weight:bold;
}
.clearfix{
}
.clearfix:after{
display:block;
clear:both;
overflow:hidden;
content:"";
}
.tabConn{
border:1px#eeesolid;
position:relative;
height:100px
}
.tabConndiv{
position:absolute;
opacity:0;
filter:alpha(opacity=0);
padding:5px;
text-align:center;
width:100%;
}
.tabConndiv.current{
opacity:1;
filter:alpha(opacity=100);
}
</style>
</head>
<body>
<h3>jQuery写的选项卡:</h3>
<divid="tab2"class="tab">
<divclass="tabTltletab-title">
<ulclass="clearfix">
<liclass="active">标题一</li>
<li>标题二</li>
<li>标题三</li>
<li>标题四</li>
</ul>
</div>
<divclass="tabConntab-conn">
<divclass="current">aaaaaaaaaaaaaaa</div>
<div>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
<div>cccccccccccccccccccccccccccccccc</div>
<div>ddddddddddddddddddddddddddddd</div>
</div>
</div>
<scripttype="text/javascript">
$(document).ready(function(){
var$tabTitle=$('.tab-title').find('li');
var$tabList=$('.tab-conn>div');
$tabTitle.click(function(){
$tabTitle.each(function(){
$tabTitle.removeClass('active');
});
varindex=$tabTitle.index(this);
$(this).addClass('active');
$tabList.eq(index).addClass('current').siblings().removeClass('current');
});
});
</script>
</body>
</html>
是不是简单了好多！
以上所述就是本文的全部内容了，希望大家能够喜欢。