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

雖然是看了示例之后自己在寫的 (就當(dāng)是給自己一個鼓勵吧 加油?。?
jquery
$(document).ready(function(){
var h3=$(".accordion h3");
$(".accordion h3:eq(0)").addClass("active");//1.首先獲取第一個H3標(biāo)簽添加class;
$(".accordion p:gt(0)").hide();//在獲取除了第一個p標(biāo)簽以外的所有標(biāo)簽都隱藏;
h3.click(function(){
$(this).next("p").slideToggle("slow")//查找下一個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
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
<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í)行]

雖然是看了示例之后自己在寫的 (就當(dāng)是給自己一個鼓勵吧 加油?。?
jquery
復(fù)制代碼 代碼如下:
$(document).ready(function(){
var h3=$(".accordion h3");
$(".accordion h3:eq(0)").addClass("active");//1.首先獲取第一個H3標(biāo)簽添加class;
$(".accordion p:gt(0)").hide();//在獲取除了第一個p標(biāo)簽以外的所有標(biāo)簽都隱藏;
h3.click(function(){
$(this).next("p").slideToggle("slow")//查找下一個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)文章
關(guān)于setInterval、setTimeout在jQuery中的使用注意事項(xiàng)
最近碰到個問題,在使用jquery寫定時(shí)器時(shí),總是會出現(xiàn)fn不存在的錯誤提示2011-09-09jQuery.validate.js表單驗(yàn)證插件的使用代碼詳解
Validate是基于jQuery的一款輕量級驗(yàn)證插件,內(nèi)置豐富的驗(yàn)證規(guī)則,這篇文章主要介紹了jQuery.validate.js表單驗(yàn)證插件的使用代碼詳解,需要的朋友可以參考下2018-10-10利用jquery給指定的table動態(tài)添加一行、刪除一行的方法
下面小編就為大家?guī)硪黄胘query給指定的table動態(tài)添加一行、刪除一行的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10jQuery表格行上移下移和置頂?shù)膶?shí)現(xiàn)方法
這篇文章主要介紹了jQuery表格行上移下移和置頂?shù)膶?shí)現(xiàn)方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-10-10深入理解jQuery中l(wèi)ive與bind方法的區(qū)別
本篇文章主要是對jQuery中l(wèi)ive與bind方法的區(qū)別進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12基于jQuery的投票系統(tǒng)顯示結(jié)果插件
投票系統(tǒng)是網(wǎng)站中十分常見的系統(tǒng),顯示結(jié)果也是十分常見的。最近因?yàn)轫?xiàng)目需要開發(fā)了一個投票結(jié)果顯示jQuery插件。2011-08-08