js与jquery分别实现tab标签页功能的方法
本文实例讲述了js与jquery分别实现tab标签页功能的方法。分享给大家供大家参考，具体如下：
首先列出样式和html标签
<styletype="text/css">
*{margin:0;padding:0;}
#myulli{list-style:none;float:left;border:1pxsolid#ddd;width:100px;height:20px;text-align:center;line-height:20px;}
#containerdiv{display:none;width:303px;height:300px;border:1pxsolid#ddd;}
#container.ssd{display:block;}
.ssl{background:#abcdef;}
</style>
</head>
<body>
<divid="tab">
<ulid="myul">
<liclass="ssl">1</li>
<li>2</li>
<li>3</li>
</ul>
<divid="container">
<divclass="ssd">woshi1</div>
<div>woshi2</div>
<div>woshi3</div>
</div>
</div>
</body>
然后就是原生的js实现tab标签的代码
<scripttype="text/javascript">
varul=document.getElementById('myul');
varli=ul.getElementsByTagName('li');
varcon=document.getElementById('container');
vardiv=con.getElementsByTagName('div');
varlen=li.length;
for(vari=0;i<len;i++){
li[i].index=i;
li[i].onclick=choose;
li[i].onmouseover=choose;
};
functionchoose(){
for(varj=0;j<len;j++){
li[j].className='';
div[j].style.display='none';
}
this.className='ssl';
div[this.index].style.display='block';
}
</script>
那我们改用jquery实现代码如下
$('#myulli').click(choose);
$('#myulli').hover(choose);
functionchoose(){
$(this).addClass('ssl').siblings().removeClass('ssl');
$('#containerdiv').eq($(this).index()).show().siblings().hide();
}
其实函数还可以简化：
functionchoose(){
$(this).addClass('ssl').siblings().removeClass('ssl').parent().next().children().eq($(this).index()).show().siblings().hide();
}
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。