jquery图片上下tab切换效果


Posted in Javascript onMarch 18, 2011
<!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.3water.com/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>
Javascript 相关文章推荐
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
Angular Renderer (渲染器)的具体使用
May 03 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
jquery无缝图片轮播组件封装
Nov 25 jQuery
原生js生成图片验证码
Oct 11 Javascript
javascript一些实用技巧小结
Mar 18 #Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 #Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 #Javascript
javascript定时保存表单数据的代码
Mar 17 #Javascript
eval与window.eval的差别分析
Mar 17 #Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
Mar 17 #Javascript
jquery.validate分组验证代码
Mar 17 #Javascript
You might like
php二维数组用键名分组相加实例函数
2013/11/06 PHP
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
python实现通过shelve修改对象实例
2014/09/26 Python
低版本中Python除法运算小技巧
2015/04/05 Python
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
Django 多语言教程的实现(i18n)
2018/07/07 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
电大自我鉴定
2013/10/27 职场文书
初中生个人学习的自我评价
2013/12/04 职场文书
卖房协议书
2014/04/11 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
公司租房协议书范本
2014/10/08 职场文书
入党转正申请书范文
2019/05/20 职场文书
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫