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 源码分析笔记(7) Queue
Jun 19 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 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 fsockopen写的HTTP下载的类
2007/02/22 PHP
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
php网站被挂木马后的修复方法总结
2014/11/06 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
python使用cPickle模块序列化实例
2014/09/25 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
PyQt5每天必学之布局管理
2018/04/19 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
python代码过长的换行方法
2018/07/19 Python
Pyqt5 基本界面组件之inputDialog的使用
2019/06/25 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
在pycharm中实现删除bookmark
2020/02/14 Python
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
什么是岗位职责
2013/11/12 职场文书
社团招新策划书
2014/02/04 职场文书
体育活动总结范文
2014/05/04 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
大客户经理岗位职责
2015/04/09 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书