jquery寫的tab切換效果 很是簡單

本身寫的一款 tab切換效果，比較簡單，適合新手

 

<style type="text/css">
*{margin:0; padding:0; font-size:12px;}
ul{list-style:none;}
ul li a{text-decoration:none; color:#000000;}
ul li a:hover{text-decoration:underline; color:#cc0000;}
#con{margin:50px auto; width:960px;}
.tab_Item{ border:1px solid #d8d9d9; width:348px;}
.tab_Tit{ background:url(images/bg.jpg) no-repeat scroll left top; height:30px;}
.tab_Tit h3{ float:left; background:url(images/icon.jpg) no-repeat scroll 0 0; font-weight:bold; margin:8px 0 0 8px; height:22px;font-size:14px;padding-left:12px; color:#333333;}
.tab_Tit a{float:left; display:block; padding-top:8px; width:56px; height:22px; border-left:1px solid #d8d9d9; text-align:center; cursor:pointer;}
.tab_Tit a:hover{ background:#fff;text-decoration:underline; color:#cc0000;}
.tab_Tit .selected{ background:#fff;}
.tab_Con{background:url(images/bg.jpg) no-repeat scroll 0 -30px; margin:6px 0 0 8px; padding-left:22px; }
.tab_Con ul{line-height:24px;}
</style>

 

<div class="tab_Item">
<div class="tab_Tit">
<h3>文章排行</h3>
<a class="">333</a>
<a class="">222</a>
<a class="selected">111</a>
</div>
<div class="tab_Con">
<ul style="display:none">
<li>
<a title="北上廣以外的IT技術人生" target="_blank" href="#">33333333333333</a>
</li>
</ul>
<ul style="display:none">
<li>
<a title="給明年依然年輕的咱們:作別150萬年薪,開始盒飯生活" target="_blank" href="#">222222222222222</a>
</li>
</ul>
<ul style="display:block">
<li>
<a title=""菜鳥"程序員和"大神"程序員差距在哪裏" target="_blank" href="#">111111111111</a>
</li>
</ul>
</div>
</div>

 

$(function(){
$(".tab_Tit a").each(function(index){ //遍歷 a 標籤 給了 index 參數（索引）
$(this).mouseover(function(){ //移動到上邊
$(".tab_Tit a.selected").removeClass("selected"); //移除這個class
$(this).addClass("selected"); //加上這個class
$(".tab_Con > ul:visible").hide(); //全部可見的 ul 都隱藏
$(".tab_Con ul:eq(" + index + ")").show(); //eq 遍歷 ul 根據 .tab_Tit a 的索引顯示
})
})
})