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事件实例详解
Nov 06 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
vuejs简单验证码功能完整示例
Jan 08 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 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中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
javascript折半查找详解
2015/01/26 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
Python记录详细调用堆栈日志的方法
2015/05/05 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
python计算二维矩形IOU实例
2020/01/18 Python
Python基于locals返回作用域字典
2020/10/17 Python
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
美术毕业生求职信
2014/02/25 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
年度考核表个人总结
2015/03/06 职场文书
自我评价优缺点范文
2015/03/11 职场文书
电影圆明园观后感
2015/06/03 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python