jquery图片上下tab切换效果

复制代码代码如下:<!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> </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中ajax调用json数据的使用说明

$.get()和$.post()这两个方法基本都一样使用，所以只说$.post()这个东东！　　情形1： $.post("url",function);此时返回的数据没有处理，所以不是json格式！　　情形2：$.post("url",function, "json");此时虽然>>>详细阅读

本文标题：jquery图片上下tab切换效果

地址：http://www.17bianji.com/kaifa2/JS/24782.html

1/2 1