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 相关文章推荐
JS仿flash上传头像效果实现代码
Jul 18 Javascript
js滚动条回到顶部的代码
Dec 06 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
深入理解jquery自定义动画animate()
May 24 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
vue的for循环使用方法
Feb 12 Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 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
PHP4之真OO
2006/10/09 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
jQuery 选择器理解
2010/03/16 Javascript
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
详解微信小程序input标签正则初体验
2018/08/18 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
python实现的希尔排序算法实例
2015/07/01 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
Python基于当前时间批量创建文件
2020/05/07 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
css3高级选择器使用方法
2013/12/02 HTML / CSS
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
幽灵公主观后感
2015/06/09 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL