学习jQuery之旅－－使用炫酷的jQuery插件

其中的ui.tabs.pack.js

Accordion

手风琴效果，大家应该很熟悉。

效果： 点击这里查看效果

Html代码：

<div class="basic" style="float:left;"　 id="list1a">
<a>Jquery-accordion分页One</a>
<div>
<p>学习Jquery之旅，和大家一起学习Jquery</p>
<br />
</div>
<a>Jquery-accordion分页Two</a>
<div>
<p>
强大的Jquery非常好用啊！

<br />
</p>
<p>
 </p>
</div>
<a>Jquery-accordion分页Three</a
<div><p>
很不很不错的Jquery-accordion插件。</p>
</div>
</div>

css和jQuery代码：

　　　 <script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery-latest.pack.js"></script>
<script type="text/javascript" src="js/jquery.accordion.js"></script>
<script type="text/javascript">
$().ready(function() {
$('#list1a').accordion();
});
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
html, body, #main { height: 100% }
.basic　 {
width: 260px;
border: 1px solid black;
}
.basic div {
background-color: #eee;
}

.basic p {
margin-bottom : 10px;
border: none;
text-decoration: none;
font-weight: bold;
font-size: 13px;
margin: 0px;
padding: 10px;
}
.basic a {
cursor:pointer;
display:block;
padding:5px;
margin-top: 0;
text-decoration: none;
font-weight: bold;
font-size: 12px;
color: black;
background-color: #00a0c6;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #999;

}



@media print {
.basic div, #navigation ul, #list2 dd, #list3 div{
display: block!important;
height: auto!important
}
}
</style>