jquery图片上下tab切换效果
更新时间：2011年03月18日 21:49:26 作者：
图片上下切换效果,学习jquery的朋友可以参考下。
复制代码 代码如下:
<!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.jb51.net/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的选择包含两种，一种是选择器，一种是筛选器。筛选器是对选择器选定的jQuery对象做进一步选择;记下来将详细介绍下筛选器children()感兴趣的你可不要错过了哈，或许本文的知识点对你有所帮助2013-02-02
IE下支持文本框和密码框placeholder效果的JQuery插件分享
这篇文章主要介绍了IE下支持文本框和密码框placeholder效果的JQuery插件分享,本文给出插件源码和使用示例,需要的朋友可以参考下2015-01-01
下面小编就为大家带来一篇使用jquery提交form表单并自定义action的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
这篇文章主要介绍了BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
这篇文章主要为大家详细介绍了jQuery+HTML5加入购物车的实现代码，功能很齐全，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-08-08
这篇文章主要介绍了Jquery实现仿京东商城省市联动菜单的简单实例演示，可以选择对应省、市、县，希望大家可以喜欢。2015-11-11
这篇文章主要介绍了如何解决jQuery动态获取手机屏幕高和宽的问题,需要的朋友可以参考下2014-05-05
这篇文章主要为大家详细介绍了Axios+Jquery实现文件上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
数字时钟在web倒计时，web闹钟效果以及基于html5的web app中，本文给大家介绍基于jquery和css3制作数字时钟附源码下载，感兴趣的朋友来看看吧2015-11-11
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
带缩略图的焦点图片切换在实际应用中很广泛的，鼠标滑上焦点图时停止自动播放，滑出时开始自动播放及鼠标滑上后显示按钮、显示大图等等,感兴趣的朋友可以了解下2013-01-01
最新评论