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

jquery 輪換顯示 第一小個(gè)例子

 更新時(shí)間：2010年05月18日 21:37:46   作者：  
用jquery實(shí)現(xiàn)的橫向顯示輪換效果。
效果如下圖所示：

雖然是看了示例之后自己在寫的 （就當(dāng)是給自己一個(gè)鼓勵吧 加油?。?
jquery
復(fù)制代碼 代碼如下:

$(document).ready(function(){
var h3=$(".accordion h3");
$(".accordion h3:eq(0)").addClass("active");//1.首先獲取第一個(gè)H3標(biāo)簽添加class；
$(".accordion p:gt(0)").hide();//在獲取除了第一個(gè)p標(biāo)簽以外的所有標(biāo)簽都隱藏；
h3.click(function(){
$(this).next("p").slideToggle("slow")//查找下一個(gè)p標(biāo)簽添加動畫，并查找它的兄弟節(jié)點(diǎn)是否顯示，如果顯示就隱藏
.siblings("p:visible").fadeOut("slow");
$(this).toggleClass("active");//給H3標(biāo)簽添加class（如果有就不添加 沒有就添加），查找兄弟節(jié)點(diǎn)移除class
$(this).siblings("h3").removeClass("active");
});
});

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

body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7 url(images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}

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

<div class="accordion">
<h3>Question One Sample Text</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h3>This is Question Two</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h3>Another Questio here</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h3>Sample heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h3>Sample Question Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
</div>

完整演示代碼:

[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]

相關(guān)文章

最新評論