首頁  >  文章  >  web前端  >  jQuery實作類似滑動門切換效果的層切換_jquery

jQuery實作類似滑動門切換效果的層切換_jquery

WBOY
WBOY原創
2016-05-16 17:21:461183瀏覽
複製代碼如下代碼:

渡//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


>
滑動門切換,jQuery層切換程式碼


$(function(){
$("ul li").each(function(i){
$(this).hover(function( ){
$(this).addClass ("bg").siblings().removeClass("bg");
$(".div:eq(" i ")").show(). siblings(".div").hide(); ;
})
})
})
腳本>;

*{ 邊距:0;填充:0;字體大小:12px;}
ul li{ list-style:none;浮動:左;背景顏色:#999;遊標:指針;寬度:100px;高度:25px;行高:25px;文字對齊:中心;}
ul li.bg{ 背景顏色:#9F0;}
.clr{ 清除:兩者;}
.div{寬度:200px ;高度:60px;背景:#666;行高:60px; text-align:center;}
.none{ 顯示:none}

頭>

  • 帳戶資訊
  • 寄地址



第一個div內容


第二個div內容
;
身體>

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn