jquery圖片上下tab切換效果
更新時間：2011年03月18日 21:49:26 作者：
圖片上下切換效果,學習jquery的朋友可以參考下。
復制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="http://demo.jb51.net/jslib/jquery/jquery.js" type="text/javascript"></script>
<style>
<!--
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;
}
--></style>
<script type="text/javascript"></script>
<div class="accordion">
<h3>Question One Sample Text</h3>
<p style="display: none;">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 style="display: none;">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 style="display: none;">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 class="active">Sample heading</h3>
<p style="display: block;">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 style="display: none;">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>
<script type="text/javascript">// <![CDATA[
$(function(){
/* $('.accordion h3').click(function (){
$('.accordion p').hide();
$(this).next().show();
});*/
var Q = {
h3: $('.accordion h3'),
p: $('.accordion p'),
qiehuan: function (){
this.h3.click(function (){
Q.p.hide();
$(this).next().show();
});
}
};
Q.qiehuan();
});
// ]]></script>
相關文章
jQuery的選擇包含兩種，一種是選擇器，一種是篩選器。篩選器是對選擇器選定的jQuery對象做進一步選擇;記下來將詳細介紹下篩選器children()感興趣的你可不要錯過了哈，或許本文的知識點對你有所幫助2013-02-02
IE下支持文本框和密碼框placeholder效果的JQuery插件分享
這篇文章主要介紹了IE下支持文本框和密碼框placeholder效果的JQuery插件分享,本文給出插件源碼和使用示例,需要的朋友可以參考下2015-01-01
下面小編就為大家?guī)硪黄褂胘query提交form表單并自定義action的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
BootStrap表單驗證中的非Submit類型按鈕點擊時觸發(fā)驗證的坑
這篇文章主要介紹了BootStrap表單驗證中的非Submit類型按鈕點擊時觸發(fā)驗證的坑,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細介紹了jQuery+HTML5加入購物車的實現(xiàn)代碼，功能很齊全，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08
Jquery實現(xiàn)仿京東商城省市聯(lián)動菜單
這篇文章主要介紹了Jquery實現(xiàn)仿京東商城省市聯(lián)動菜單的簡單實例演示，可以選擇對應省、市、縣，希望大家可以喜歡。2015-11-11
這篇文章主要介紹了如何解決jQuery動態(tài)獲取手機屏幕高和寬的問題,需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細介紹了Axios+Jquery實現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
基于Jquery和CSS3制作數(shù)字時鐘附源碼下載(CSS3篇)
數(shù)字時鐘在web倒計時，web鬧鐘效果以及基于html5的web app中，本文給大家介紹基于jquery和css3制作數(shù)字時鐘附源碼下載，感興趣的朋友來看看吧2015-11-11
jquery實現(xiàn)的帶縮略圖的焦點圖片切換(自動播放/響應鼠標動作)
帶縮略圖的焦點圖片切換在實際應用中很廣泛的，鼠標滑上焦點圖時停止自動播放，滑出時開始自動播放及鼠標滑上后顯示按鈕、顯示大圖等等,感興趣的朋友可以了解下2013-01-01