JQuery學(xué)習(xí)筆記 實(shí)現(xiàn)圖片翻轉(zhuǎn)效果和TAB標(biāo)簽切換效果
更新時(shí)間:2008年11月19日 12:54:55 作者:
為了保證前臺(tái)頁(yè)面的整潔,我們習(xí)慣性地將CSS放入一個(gè)單獨(dú)的.CSS文件中以便調(diào)用,而JS也同樣可以放到單獨(dú)的JS文件中去,并且頁(yè)面上的事件如onclick,onmouseover也可以分離出來(lái),現(xiàn)在網(wǎng)上比較流行JQuery
2、JQuery實(shí)現(xiàn)Tab標(biāo)簽寫換效果,這個(gè)比較常用到,之前用JS寫的代碼依舊很亂,而且代碼沒(méi)有分離開(kāi),改造后部分代碼如下:
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;
}
最后附一張效果:

以上就是今天的學(xué)習(xí)總結(jié),這里因?yàn)闇y(cè)試的原因,我沒(méi)有單獨(dú)放到JS文件中,不過(guò)大家可以將以上代碼放到同一個(gè)JS文件中去,這樣可以方便調(diào)用,再有就是記得一定要引入JQuery框架文件啊...
您可能感興趣的文章:
- Android實(shí)現(xiàn)文字翻轉(zhuǎn)動(dòng)畫的效果
- Android利用Camera實(shí)現(xiàn)中軸3D卡牌翻轉(zhuǎn)效果
- Android實(shí)現(xiàn)圖片反轉(zhuǎn)、翻轉(zhuǎn)、旋轉(zhuǎn)、放大和縮小
- Android實(shí)現(xiàn)Flip翻轉(zhuǎn)動(dòng)畫效果
- Android動(dòng)畫之3D翻轉(zhuǎn)效果實(shí)現(xiàn)函數(shù)分析
- Android圖片翻轉(zhuǎn)動(dòng)畫簡(jiǎn)易實(shí)現(xiàn)代碼
- JS焦點(diǎn)圖切換,上下翻轉(zhuǎn)
- 如何使用Matrix對(duì)bitmap的旋轉(zhuǎn)與鏡像水平垂直翻轉(zhuǎn)
- PHP圖片處理之圖片旋轉(zhuǎn)和圖片翻轉(zhuǎn)實(shí)例
- Android實(shí)現(xiàn)卡片翻轉(zhuǎn)動(dòng)畫
相關(guān)文章
jquery.mobile 共同布局遇到的問(wèn)題小結(jié)
這篇文章主要介紹了jquery.mobile 共同布局遇到的問(wèn)題小結(jié),需要的朋友可以參考下2015-02-02jQuery EasyUI中DataGird動(dòng)態(tài)生成列的方法
EasyUI中使用DataGird顯示數(shù)據(jù)列表中,有時(shí)需要根據(jù)需要顯示不同的列,例如,在權(quán)限管理中,不同的用戶登錄后只能查看自己權(quán)限范圍內(nèi)的列表字段,這就需要DataGird動(dòng)態(tài)組合列,下面介紹EasyUI中DataGird動(dòng)態(tài)生成列的方法2016-04-04jQuery AJAX實(shí)現(xiàn)調(diào)用頁(yè)面后臺(tái)方法和web服務(wù)定義的方法分享
jQuery AJAX實(shí)現(xiàn)調(diào)用頁(yè)面后臺(tái)方法和web服務(wù)定義的方法分享,需要的朋友可以參考下2012-03-03jQuery UI AutoComplete 自動(dòng)完成使用小記
jQuery UI AutoComplete 自動(dòng)完成使用小記,使用jquery的朋友實(shí)現(xiàn)搜索自動(dòng)完成等功能的朋友可以參考下。2010-08-08玩轉(zhuǎn)jQuery按鈕 請(qǐng)告訴我你最喜歡哪些?
在Web的世界里,按鈕對(duì)于我們來(lái)說(shuō)再也普通不過(guò)了,當(dāng)然也用得比較多。今天這篇文章我主要向大家分享20個(gè)基于jQuery和CSS技術(shù)的按鈕,這些基于jQuery的按鈕都非同凡響,所以我在標(biāo)題里用了“令人驚嘆”這一個(gè)詞2012-01-01jQuery序列化表單成對(duì)象的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇jQuery序列化表單成對(duì)象的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11jQuery+vue.js實(shí)現(xiàn)的多選下拉列表功能示例
這篇文章主要介紹了jQuery+vue.js實(shí)現(xiàn)的多選下拉列表功能,涉及jQuery+vue.js數(shù)據(jù)綁定及事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2019-01-01