快捷導(dǎo)航

JQuery學(xué)習(xí)筆記實(shí)現(xiàn)圖片翻轉(zhuǎn)效果和TAB標(biāo)簽切換效果

更新時(shí)間：2008年11月19日 12:54:55 作者：

為了保證前臺頁面的整潔，我們習(xí)慣性地將CSS放入一個(gè)單獨(dú)的.CSS文件中以便調(diào)用，而JS也同樣可以放到單獨(dú)的JS文件中去，并且頁面上的事件如onclick，onmouseover也可以分離出來，現(xiàn)在網(wǎng)上比較流行JQuery

2、JQuery實(shí)現(xiàn)Tab標(biāo)簽寫換效果，這個(gè)比較常用到，之前用JS寫的代碼依舊很亂，而且代碼沒有分離開，改造后部分代碼如下：
JS代碼：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
<!-- 
$(document).ready(function(){ 
$("#MenuTabs div").mouseover(function(){ 
$(this).css("cursor","pointer"); 
var checkmenu = $(this).attr("id"); 
var checkcontent = checkmenu.replace("MenuTab","Content"); 
$("#MenuTabs div").each(function(){ 
if($(this).attr("id") == checkmenu){ 
$(this).attr("class","Tab_On"); 
}else{ 
$(this).attr("class","Tab_Off"); 
} 
}); 
$("#Contents div").each(function(){ 
if($(this).attr("id") == checkcontent){ 
$(this).css("display","block"); 
}else{ 
$(this).css("display","none"); 
} 
}); 
}); 
}); 
//--> 
</script> 

HTML代碼：

復(fù)制代碼代碼如下:

 
<div style="padding-top:10px;"> 
<div id="MenuTabs" style="float:left;" align="left"> 
<div id="MenuTab1" class="Tab_Off"> 標(biāo)題一</div> 
<div id="MenuTab2" class="Tab_Off"> 標(biāo)題二</div> 
<div id="MenuTab3" class="Tab_On"> 標(biāo)題三</div> 
<div id="MenuTab4" class="Tab_Off"> 標(biāo)題四</div> 
</div> 
<div id="Contents" style="float:left;"> 
<div id="Content1" style="display:none;">內(nèi)容一</div> 
<div id="Content2" style="display:none;">內(nèi)容二</div> 
<div id="Content3" style="display:block;">內(nèi)容三</div> 
<div id="Content4" style="display:none;">內(nèi)容四</div> 
</div> 
</div> 

CSS代碼：

復(fù)制代碼代碼如下:

 
#Contents{ 
width:318px; 
height:125px; 
border-top:1px #d1d1d1 solid; 
border-right:1px #d1d1d1 solid; 
border-bottom:1px #d1d1d1 solid; 
color:#d1d1d1; 
} 
.Tab_Off{ 
width:132px; 
height:30px; 
background-color:#ebebeb; 
vertical-align:middle; 
line-height:30px; 
color:#373737; 
border-bottom:1px #f6f6f6 solid; 
border-top:1px #f6f6f6 solid; 
border-left:1px #ededed solid; 
border-right:1px #d1d1d1 solid; 
} 
.Tab_On{ 
width:132px; 
height:30px; 
background-color:#FFFFFF; 
vertical-align:middle; 
line-height:30px; 
color:#696969; 
border-top:1px #dbdbdb solid; 
border-bottom:1px #dbdbdb solid; 
border-left:1px #dbdbdb solid; 
border-right:1px #FFFFFF solid; 
} 