jquery插件 手风琴

原创 2012年03月28日 21:41:27

<html>
<head>
<title>手风琴效果</title>
<script type="text/javascript" language="javascript" src="./js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="./js/jquery-ui.js"></script>
<link rel="stylesheet" href="./css/jquery-ui.css" />

<script language="javascript" type="text/javascript">

$(function(){
 
 $("#accordion").accordion({
  header:"h2",
     event:"mouseover", 
  
   autoHeight:true,
     fillSpace:true,
  
  
  })
 
 
 
 
 
 
 });

 


</script>

 


</head>
<body>
<div id="accordion" style="width:600px; height:500px; border:#00C solid 5px;">

<div>
<h2><a href="#">一</a></h2>
<div>你信不信我是手风琴</div>
</div>

<div>
<h2><a href="#">二</a></h2>
<div>你信不信我是钢琴</div>
</div>


<div>
<h2><a href="#">三</a></h2>
<div>你信不信我是蘑菇</div>
</div>

<div>
<h2><a href="#">四</a></h2>
<div>你信不信我是超人</div>
</div>

<div>
<h2><a href="#">五</a></h2>
<div>你信不信我是汽油</div>
</div>

<div>
<h2><a href="#">六</a></h2>
<div>你信不信我是大葱</div>
</div>

<div>
<h2><a href="#">七</a></h2>
<div>你信不信我不是人</div>
</div>

 

 

</div>

 

 


</body>

 

</html>

相关文章推荐

jquery插件实现手风琴效果!

手风琴的效果 $(document).ready(function (){ // var option = { hrader: "h3",s}; [{},{},{}]; ...
  • Oo__YAN
  • Oo__YAN
  • 2012年03月28日 21:20
  • 3018

jQuery插件的使用 --- 手风琴的效果

jQuery插件的使用 --- 手风琴的效果 在使用jQuery插件之前要导入需要的js文件和css文件,代码如下: ...

jquery插件手风琴的效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 手风琴的效...

bootstrap中jquery插件——collapse折叠效果-手风琴效果

先来掌握collapse插件的基本用法,再慢慢深入实例。 collapse最基本的效果是像下图所示的,点击按钮可以显示/隐藏下面的元素: 实现代码如下:Link with href //...

jquery插件手风琴效果

手风琴的效果 body{ font:62.5% "Trebuchet MS", sans-serif; margin: 50px;} //使用jquery加载事...

用jquery插件实现手风琴效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> ...

jquery插件实现手风琴效果!

>  html xmlns="http://www.w3.org/1999/xhtml">  head>  meta http-equiv="Content-Type" content="...
  • SANGLIU
  • SANGLIU
  • 2013年03月14日 20:16
  • 822

jquery插件--实现手风琴效果

无标题文档 //手风琴效果 $(function(){ //var option= { header:"h3",}; $("#accor...

jquery插件之手风琴

1、在学习jquery插件之前首先我们来看一下该怎样开始布置工作     jquery  ui使用前提:             第一步:引入类库文件                     包...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery插件 手风琴
举报原因:
原因补充:

(最多只允许输入30个字)