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

本文实例讲述了js与jquery分别实现tab标签页功能的方法。分享给大家供大家参考，具体如下：

首先列出样式和html标签

*{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;}

• 1
• 2
• 3

woshi1

woshi2

woshi3

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

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].οnclick=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';

}

那我们改用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程序设计有所帮助。