欢迎来到Java学习网!
设为首页 | 加入收藏
当前位置: 首页 > Java语言 > CSS教程 >

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代码部分------------------
注释:java中文网:http://www.javaweb.cc 欢迎投稿,邮箱:yyzm@vip.qq.com
<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">Java中文网Java中文网Java中文网Java中文网Java中文网Java中文网Java中文网Java中文网Java中文网Java中文网Java中文网Java中文网Java中文网Java中文网Java中文网Java中文网</div>

    相关教程
    推荐内容