欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery學(xué)習(xí)筆記 實現(xiàn)圖片翻轉(zhuǎn)效果和TAB標簽切換效果第2/2頁

 更新時間:2008年11月19日 12:54:55   作者:  
為了保證前臺頁面的整潔,我們習(xí)慣性地將CSS放入一個單獨的.CSS文件中以便調(diào)用,而JS也同樣可以放到單獨的JS文件中去,并且頁面上的事件如onclick,onmouseover也可以分離出來,現(xiàn)在網(wǎng)上比較流行JQuery

2、JQuery實現(xiàn)Tab標簽寫換效果,這個比較常用到,之前用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"> 標題一</div>
<div id="MenuTab2" class="Tab_Off"> 標題二</div>
<div id="MenuTab3" class="Tab_On"> 標題三</div>
<div id="MenuTab4" class="Tab_Off"> 標題四</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;
}

最后附一張效果:


以上就是今天的學(xué)習(xí)總結(jié),這里因為測試的原因,我沒有單獨放到JS文件中,不過大家可以將以上代碼放到同一個JS文件中去,這樣可以方便調(diào)用,再有就是記得一定要引入JQuery框架文件啊...

相關(guān)文章

最新評論