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框架文件啊...
您可能感興趣的文章:
- Android實現(xiàn)文字翻轉(zhuǎn)動畫的效果
- Android利用Camera實現(xiàn)中軸3D卡牌翻轉(zhuǎn)效果
- Android實現(xiàn)圖片反轉(zhuǎn)、翻轉(zhuǎn)、旋轉(zhuǎn)、放大和縮小
- Android實現(xiàn)Flip翻轉(zhuǎn)動畫效果
- Android動畫之3D翻轉(zhuǎn)效果實現(xiàn)函數(shù)分析
- Android圖片翻轉(zhuǎn)動畫簡易實現(xiàn)代碼
- JS焦點圖切換,上下翻轉(zhuǎn)
- 如何使用Matrix對bitmap的旋轉(zhuǎn)與鏡像水平垂直翻轉(zhuǎn)
- PHP圖片處理之圖片旋轉(zhuǎn)和圖片翻轉(zhuǎn)實例
- Android實現(xiàn)卡片翻轉(zhuǎn)動畫
相關(guān)文章
jquery.mobile 共同布局遇到的問題小結(jié)
這篇文章主要介紹了jquery.mobile 共同布局遇到的問題小結(jié),需要的朋友可以參考下2015-02-02jQuery EasyUI中DataGird動態(tài)生成列的方法
EasyUI中使用DataGird顯示數(shù)據(jù)列表中,有時需要根據(jù)需要顯示不同的列,例如,在權(quán)限管理中,不同的用戶登錄后只能查看自己權(quán)限范圍內(nèi)的列表字段,這就需要DataGird動態(tài)組合列,下面介紹EasyUI中DataGird動態(tài)生成列的方法2016-04-04jQuery AJAX實現(xiàn)調(diào)用頁面后臺方法和web服務(wù)定義的方法分享
jQuery AJAX實現(xiàn)調(diào)用頁面后臺方法和web服務(wù)定義的方法分享,需要的朋友可以參考下2012-03-03jQuery UI AutoComplete 自動完成使用小記
jQuery UI AutoComplete 自動完成使用小記,使用jquery的朋友實現(xiàn)搜索自動完成等功能的朋友可以參考下。2010-08-08jQuery+vue.js實現(xiàn)的多選下拉列表功能示例
這篇文章主要介紹了jQuery+vue.js實現(xiàn)的多選下拉列表功能,涉及jQuery+vue.js數(shù)據(jù)綁定及事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2019-01-01