tab頁籤在網上是很常見的一種效果 網站當中随處可見 特别是大型網站到處都是，但是寫tab這種效果 用的方式可能不一樣 有的是YUI寫的 用的是用KISSY寫的 有的是用原審js寫的 也有的是以Jquery架構寫的 但是我這裡是用Jquery來封裝tab頁籤的 在js中我用了Jquery中的children()這個方法 擷取父類中直接子元素，記住一定是直接子元素 假入說要擷取子元素的div當中的a标簽 比如這樣擷取 $("父類").children("div a");想擷取a标簽是擷取不到的 隻能擷取到div标簽！！我以前做頁面時候就碰到過這種情況！OK 其實用Jquery來封裝tab頁籤是非常簡單的一件事情！隻要幾行代碼 就ok了！下面是我的HTML結構及CSS
<style type="text/css">
ul,li,div{ margin:0; padding:0;}
ul,li{ list-style:none;}
.tabWrap{ width:450px; margin:0 auto 50px; overflow:hidden;}
.tab{ background:#F93; overflow:hidden; width:450px;}
.tab li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer; height:22px; line-height:22px;}
.tab li.on{background:#F60;}
.tabContent .p-content{ padding:20px; border:1px solid #ddd; border-top:0 none; }
.tabContent .hide{ display:none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<div class="tabWrap">
<ul class="tab">
<li>頁籤1</li>
<li>頁籤2</li>
<li>頁籤3</li>
</ul>
<div class="tabContent">
<div class="p-content">1111</div>
<div class="p-content hide">222</div>
<div class="p-content hide">3333</div>
</div>
</div>
<br/>
<div class="tabWrap">
我這邊HTML是用了兩個一樣的結構及樣式 是為了測試js在一個頁面上多次調用是否成功！JS代碼如下：
<script type="text/javascript">
$(function(){
function tabs(tabMenu,on,tabContent){
$(tabContent).each(function(){
$(this).children().eq(0).show();
});
$(tabMenu).each(function(){
$(this).children().eq(0).addClass(on);
});
$(tabMenu).children().hover(function(){
$(this).addClass(on).siblings().removeClass(on);
var index = $(tabMenu).children().index(this);
$(tabContent).children().eq(index).show().siblings().hide();
}
tabs(".tab","on",".tabContent");
})
</script>
引用上面的js就可以了！為了更清晰 待會把源檔案放在附件裡面 随時可以下載下傳看看！下面說說寫這個頁面的js一點思路！
一 function tabs(tabMenu,on,tabContent){} 用這個函數來封裝js 調用的方式是tabs(".tab","on",".tabContent"),其中tabMenu是指li外層ul on是指當滑鼠移上去li 希望他有個背景 tabContent 是指content的外層！
二 接着用each來周遊 找到第一個子元素li增加一個類on 第一個content讓她們顯示！接着當滑鼠移到任何一個li時候 讓目前的li增加一個類on 同輩元素删除類on 然後索引目前的li 看是第幾個 最後找出content 如果他的索引值和li的索引值相同的話 顯示内容 同輩元素隐藏掉！思路就這麼簡單！！！！
<a href="http://down.51cto.com/data/2359275" target="_blank">附件：http://down.51cto.com/data/2359275</a>
本文轉自 塗根華 51CTO部落格，原文連結：http://blog.51cto.com/tugenhua/715331，如需轉載請自行聯系原作者
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)