最近在项目开发中要用到tab切换效果 看了下jquery 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">内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6</div>