DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> jQuery+CSS實現Tab切換效果
jQuery+CSS實現Tab切換效果
編輯: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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved