觀看結果
用法:
1.添加JS庫
2.建立xhtml結構:
3.調用JS:
完成:
簡單而且效果不錯吧
如果還要界面好看點,自已定義下CSS吧
觀看結果
用法:
1.添加JS庫
程序代碼
<script src="prototype.lite.js" type="text/javascript"></script>
<script src="moo.fx.js" type="text/javascript"></script>
<script src="moo.fx.pack.js" type="text/javascript"></script>
<script src="moo.fx.js" type="text/javascript"></script>
<script src="moo.fx.pack.js" type="text/javascript"></script>
2.建立xhtml結構:
程序代碼
<div id="container">
<H1 class="title"><A href="javascript:void(0)">(1)這裡放標題</H1>
<div class="content">
<p>(1)這裡放內容</p>
</div>
<H1 class="title"><A href="javascript:void(0)">(2)這裡放標題</H1>
<div class="content">
<p>(2)這裡放內容</p>
</div><H1 class="title"><A href="javascript:void(0)">(3)這裡放標題</H1>
<div class="content">
<p>(3)這裡放內容</p>
</div>
</div>
<H1 class="title"><A href="javascript:void(0)">(1)這裡放標題</H1>
<div class="content">
<p>(1)這裡放內容</p>
</div>
<H1 class="title"><A href="javascript:void(0)">(2)這裡放標題</H1>
<div class="content">
<p>(2)這裡放內容</p>
</div><H1 class="title"><A href="javascript:void(0)">(3)這裡放標題</H1>
<div class="content">
<p>(3)這裡放內容</p>
</div>
</div>
3.調用JS:
程序代碼
<script type="text/javascript">
//定義contents 組數為所有將要顯示的內容
var contents = document.getElementsByClassName('content');
//定義contents 組數為所有標題,也是可點擊展開的按鈕
var toggles = document.getElementsByClassName('title');
//調用moofx JS庫
var myAccordion = new fx.Accordion(
toggles, contents, {opacity: true, duration: 400} //opacity確定是否有alpha透明變化,duration確定動作所有時間
);
myAccordion.showThisHideOpen(contents[0]); //默認打開第一個內容
</script>
//定義contents 組數為所有將要顯示的內容
var contents = document.getElementsByClassName('content');
//定義contents 組數為所有標題,也是可點擊展開的按鈕
var toggles = document.getElementsByClassName('title');
//調用moofx JS庫
var myAccordion = new fx.Accordion(
toggles, contents, {opacity: true, duration: 400} //opacity確定是否有alpha透明變化,duration確定動作所有時間
);
myAccordion.showThisHideOpen(contents[0]); //默認打開第一個內容
</script>
完成:
簡單而且效果不錯吧
如果還要界面好看點,自已定義下CSS吧
觀看結果
全站熱搜
留言列表