编程 Javascript

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>

jquery图片上下tab切换效果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Google AJAX 搜索 API实现代码

Nov 17 Javascript

js 实现浏览历史记录示例

Apr 20 Javascript

javascript实现表单提交后，提交按钮不可用的方法

Apr 18 Javascript

jQuery日程管理插件fullcalendar使用详解

Jan 07 Javascript

angularjs点击图片放大实现上传图片预览

Feb 24 Javascript

Vue 2.0+Vue-router构建一个简单的单页应用（附源码）

Mar 14 Javascript

Angular在模板驱动表单中自定义校验器的方法

Aug 09 Javascript

vue 简单自动补全的输入框的示例

Mar 12 Javascript

vue+axios+promise实际开发用法详解

Oct 15 Javascript

基于VUE的v-charts的曲线显示功能

Oct 01 Javascript

vue实现权限控制路由(vue-router 动态添加路由)

Nov 04 Javascript

Nest.js散列与加密实例详解

Feb 24 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

Tomcat(18) i5 9400(1) GTX1660(1) i7 6700(1) i5 10400(1) win11(40) win10(43) React(6) 速龙(1) ipad(1)