|
自己写的一款 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 的索引显示
})
})
})
|
