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

  • 相关阅读:
    android 入门-ID
    Win10 VS2015 社区版切换到VS2013社区版 进行维护之前的项目
    Win10 AppBar
    Win10 保存Element到相册
    LRUCache c#
    Winform解决界面重绘闪烁的问题
    使用Emit实现给实体赋值
    Winform 自定义窗体皮肤组件
    WPF 分享一种背景动画效果
    使用MEF与Castle实现AOP
  • 原文地址:https://www.cnblogs.com/webdm/p/2033283.html
Copyright © 2011-2022 走看看