jquery+css 实现tab效果
最近在项目开发中要用到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>