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

js与jquery分别实现tab标签页功能的方法

2016-11-18 11:38 941 查看

首先列出样式和html标签

<style type="text/css">
*{margin: 0;padding: 0;}
#myul li {list-style: none; float: left; border: 1px solid #ddd; width: 100px; height: 20px; text-align: center; line-height: 20px;}
#container div{display: none; width: 303px; height: 300px; border: 1px solid #ddd; }
#container .ssd{display: block;}
.ssl{background: #abcdef;}
</style>
</head>
<body>
<div id="tab">
<ul id="myul">
<li class="ssl">1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="container">
<div class="ssd">woshi1</div>
<div>woshi2</div>
<div>woshi3</div>
</div>
</div>
</body>

然后就是原生的js 实现tab标签的代码

<script type="text/javascript">
var ul = document.getElementById('myul');
var li = ul.getElementsByTagName('li');
var con = document.getElementById('container');
var div = con.getElementsByTagName('div');
var len = li.length;
for (var i = 0; i < len; i++) {
li[i].index = i;
li[i].onclick=choose;
li[i].onmouseover = choose;
};
function choose(){
for(var j = 0; j < len; j++) {
li[j].className = '';
div[j].style.display = 'none';
}
this.className = 'ssl';
div[this.index].style.display='block';
}
</script>

那我们改用jquery实现代码如下

$('#myul li').click(choose);
$('#myul li').hover(choose);
function choose(){
$(this).addClass('ssl').siblings().removeClass('ssl');
$('#container div').eq($(this).index()).show().siblings().hide();
}

其实函数还可以简化：

function choose(){
$(this).addClass('ssl').siblings().removeClass('ssl').parent().next().children().eq($(this).index()).show().siblings().hide();
}

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

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

标签： js jquery tab标签页

相关文章推荐

新的分享

章节导航