jQuery+CSS實現Tab切換效果
----------------CSS代碼部分------------------
ul,li{
margin:0px;
padding:0px;
/*去掉li的原點 */
list-style:none;
}
li{
/*橫向顯示*/
float:left;
padding:5px;
background-color:#868686;
color:white;
margin-right:2px;
border:1px solid white;
}
.tabIn{
background-color:#6E6E6E;
border:1px solid #6E6E6E;
}
div{
clear:left;
color:white;
width:300px;
height:200px;
background-color:#6E6E6E;
display:none;
padding:10px;
}
.divIn{
display:block;
}
------------------JS部分------------------
$(
function(){
$("li[id^='tabLi_']").mouSEOver(function(){
$(".divIn").CSS("display","none");
$(".divIn").removeClass("divIn");
$(".tabIn").removeClass("tabIn");
var currentId=$(this).attr("id");
var id=currentId.replace("tabLi_","");
$("#divLi_"+id+"").addClass("divIn");
$("#divLi_"+id+"").CSS("display","block");
$(this).addClass("tabIn");
});
}
);
---------------Html代碼部分------------------
<ul id="tabRight">
<li class="tabIn" id="tabLi_1" ><a href="#">熱門網游</a></li>
<li id="tabLi_2"><a href="#">ABCD</a></li>
<li id="tabLi_3"><a href="#">EFGH</a></li>
<li id="tabLi_4"><a href="#">EFGH4</a></li>
<li id="tabLi_5"><a href="#">EFGH5</a></li>
<li id="tabLi_6" class="lastitem"><a href="#">EFGH6</a></li>
</ul>
<div class="divIn" id="divLi_1">內容1</div>
<div id="divLi_2">內容2</div>
<div id="divLi_3">內容3</div>
<div id="divLi_4">內容4</div>
<div id="divLi_5">內容5</div>
<div id="divLi_6">智可網</div>