手风琴展示效果

最新推荐文章于 2021-10-03 15:21:14 发布

转载最新推荐文章于 2021-10-03 15:21:14 发布 · 619 阅读

web前端开发同时被 2 个专栏收录

26 篇文章

订阅专栏

25 篇文章

订阅专栏

//自己在Dreamweaver上通过测试。

<!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=gb2312" />

<title>手风琴展示效果</title>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="../js/jquery-ui-1.8.18.custom.min.js"></script> 
<link type="text/css" rel="stylesheet" href="../css/jquery-ui-1.8.18.custom.css" />
<style type="text/css" >
	.one .two .three{
	z-index:2px;
	}
	.spring{
	font-style:oblique;
	background-color:#003399;
	border-bottom-color:#00CC66;
	}
</style>
</head>

<body>
<div>

       <h1><br></h1>

       <h1>模仿手风琴效果</h1>

    </div>

    <div id="content">

       <div>

           <h3><a href="#" onclick="javascript:void(0);">First</a></h3>

           <div class="one">页面初始化展现</div>

       </div>

       <div>

           <h3><a href="#" onclick="javascript:void(0);">Secord</a></h3>

           <div class="two">点击展现效果1</div>

       </div>

       <div>

           <h3><a href="#" onclick="javascript:void(0);">Third</a></h3>

           <div class="three">点击展现效果2</div>

       </div>
    </div>

<script type="text/javascript">

$(document).ready(function() {

		$(".one").click(function(){
			$(this).toggleClass("spring");
		});
		
		$(".two").focus(function(){
			$(this).addClass("spring");
		});
		
		$(".two").blur(function(){
			$(this).removeClass("spring");
		});
	
	
       $("#content").accordion({
	   
           header:"h3",//用来指定标题头，现在的意思就是指头信息必须包含在h3标签里。

           animated : "slide",//设置展开主题的动画效果

           event : "click",//设置事件的触发方式mouseover 鼠标移动 click 鼠标点击等默认为click

           autoHeight:true,//设置自动调整主题高度

           icon:{

              header:"ui-accordion-header",

              headerSelected:"ui-accordion-header"

           },//设置标题的背景图片

           active:0//设置默认展开的主题，默认是0

       });

       //获取手风琴中展开的options主题的值

       //var activeVal = $("#accordion").accordion("option","active");

       //设置展开option主题的值

       //activeVal = $("#accordion").accordion("option","active",2);
    });
</script>

</body>
</html>