DIV 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代碼部分------------------
<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>