本文實例講述了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

woshi1woshi2woshi3

然后就是原生的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程序設計有所幫助。

總結

以上是生活随笔為你收集整理的html tab与jQuery,js与jquery分别实现tab标签页功能的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。