jquery 輪換顯示 第一小個例子
更新時間：2010年05月18日 21:37:46 作者：
用jquery實現的橫向顯示輪換效果。
效果如下圖所示：
雖然是看了示例之后自己在寫的 （就當是給自己一個鼓勵吧 加油?。?
jquery
$(document).ready(function(){
var h3=$(".accordion h3");
$(".accordion h3:eq(0)").addClass("active");//1.首先獲取第一個H3標簽添加class；
$(".accordion p:gt(0)").hide();//在獲取除了第一個p標簽以外的所有標簽都隱藏；
h3.click(function(){
$(this).next("p").slideToggle("slow")//查找下一個p標簽添加動畫，并查找它的兄弟節(jié)點是否顯示，如果顯示就隱藏
.siblings("p:visible").fadeOut("slow");
$(this).toggleClass("active");//給H3標簽添加class（如果有就不添加 沒有就添加），查找兄弟節(jié)點移除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í)行]
雖然是看了示例之后自己在寫的 （就當是給自己一個鼓勵吧 加油?。?
jquery
復制代碼 代碼如下:
$(document).ready(function(){
var h3=$(".accordion h3");
$(".accordion h3:eq(0)").addClass("active");//1.首先獲取第一個H3標簽添加class；
$(".accordion p:gt(0)").hide();//在獲取除了第一個p標簽以外的所有標簽都隱藏；
h3.click(function(){
$(this).next("p").slideToggle("slow")//查找下一個p標簽添加動畫，并查找它的兄弟節(jié)點是否顯示，如果顯示就隱藏
.siblings("p:visible").fadeOut("slow");
$(this).toggleClass("active");//給H3標簽添加class（如果有就不添加 沒有就添加），查找兄弟節(jié)點移除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í)行]
相關文章
這篇文章主要介紹了EasyUI為Numberbox添加blur事件的方法 ,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
這篇文章主要介紹了jQuery實現獲取table表格第一列值的方法,涉及jQuery針對table表格元素的遍歷與讀取相關技巧,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了jquery實現彈出窗口效果的實例代碼。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
今天的內容是關于表單驗證插件的制作。表單驗證控件實現的主要功能是，當表單提交的時候檢查必填項是否正確填寫，同時根據需要驗證輸入信息是否符合規(guī)范2012-08-08
這篇文章主要介紹了jquery實現簡單文字提示效果的方法,以完整實例形式分析了jQuery插件jquery-1.2.6.pack.js實現文字提示效果的相關技巧,并提供了jquery-1.2.6.pack.js的本站下載地址,需要的朋友可以參考下2015-12-12
這篇文章主要為大家介紹了jQuery中DOM 屬性使用實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了使用jquery實現的鼠標拖動排序Li或Table,需要的朋友可以參考下2014-05-05
javascript jQuery $.post $.ajax用法
這是一個簡單的 POST 請求功能以取代復雜 $.ajax 。請求成功時可調用回調函數。如果需要在出錯時執(zhí)行函數，請使用 $.ajax。2008-07-07
jQuery彈出下拉列表插件（實現kindeditor的@功能）
這篇文章主要介紹了jQuery彈出下拉列表插件（實現kindeditor的@功能）的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
本篇文章主要是對jquery 刪除字符串最后一個字符的方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02