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 相关文章推荐
javascript document.referrer 用法
Apr 30 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
layui清除radio的选中状态实例
Nov 14 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 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
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
详解Python正则表达式re模块
2019/03/19 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
sort命令的作用和用法
2012/11/04 面试题
AJAX都有哪些有点和缺点
2012/11/03 面试题
手机业务员岗位职责
2013/12/13 职场文书
2014年仓库工作总结
2014/11/20 职场文书
小学班主任自我评价
2015/03/11 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python