zoukankan      html  css  js  c++  java
  • 来自老外用jquery实现的内容隐藏代码

    代码简介:

    jquery实现的,代码简介,很实用,单击箭头可隐藏其他,显示其单击的内容,很不错的,您运行一下就知道了。

    代码内容:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title>来自老外用jquery实现的内容隐藏代码_网页代码站(www.webdm.cn)</title>
    
    <script type="text/javascript" src="http://www.webdm.cn/images/20091029/jquery.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function(){
    	
    	$(".accordion2 h3").eq(2).addClass("active");
    	$(".accordion2 p").eq(2).show();
    
    	$(".accordion2 h3").click(function(){
    		$(this).next("p").slideToggle("slow")
    		.siblings("p:visible").slideUp("slow");
    		$(this).toggleClass("active");
    		$(this).siblings("h3").removeClass("active");
    	});
    
    });
    </script>
    
    <style type="text/css">
    body {
    	margin: 10px auto;
    	 570px;
    	font: 75%/120% Arial, Helvetica, sans-serif;
    }
    .accordion2 {
    	 480px;
    	border-bottom: solid 1px #c4c4c4;
    }
    .accordion2 h3 {
    	background: #e9e7e7 url(http://www.webdm.cn/images/20091029/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;
    }
    .accordion2 h3:hover {
    	background-color: #e3e2e2;
    }
    .accordion2 h3.active {
    	background-position: right 5px;
    }
    .accordion2 p {
    	background: #f7f7f7;
    	margin: 0;
    	padding: 10px 15px 20px;
    	border-left: solid 1px #c4c4c4;
    	border-right: solid 1px #c4c4c4;
    	display: none;
    }
    </style>
    </head>
    
    <body>
    
    <div class="accordion2">
    	<h3>Question One Sample Text</h3>
    	<p>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>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>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 heading</h3>
    	<p>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>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>
    <p><a href="http://www.webdm.cn/">网页代码站(Webdm)</a>提示您:如果您看不到,请刷新页面!</p>
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/7d7bda6d-403c-44a2-81f8-8858aad9641a.html

  • 相关阅读:
    ORA-01935: missing user or role name
    ORA-00923: FROM keyword not found where expected
    ORA-00933: SQL command not properly ended
    ORA_12514:TNS:listener does not currently know of service requested in connect descriptor
    ORA-00918: column ambiguously defined
    ORA-01789: 查询块具有不正确的结果列数
    ORA-01789: query block has incorrect number of result columns
    ORA-01747
    ORA-01843: not a valid month
    ORA-00904: "I_LEVEL": invalid identifier
  • 原文地址:https://www.cnblogs.com/webdm/p/2033283.html
Copyright © 2011-2022 走看看