創建一個簡單的mootools 1.2選項卡系統

Question

我正嘗試使用mootools 1.2版本創建一個非常簡單的選項卡界面。我需要有淡入淡出的效果，沒有滑動或變形。我試圖在網上找到一些演示，但他們都提到不同版本的mootools，或者它們比我的需求太複雜。你能給我一些指導嗎？

這是我正在嘗試做的一個圖像和示例代碼。

alt text http://img204.imageshack.us/img204/4983/tabsd.jpg

<ul id="buttons"> 
    <li><a href="#">button 1</a></li> 
    <li><a href="#">button 2</a></li> 
    <li><a href="#">button 3</a></li> 
    <li><a href="#">button 4</a></li> 
</ul> 

<div id="tab1">content for button 1</div> 
<div id="tab2">content for button 2</div> 
<div id="tab3">content for button 3</div> 
<div id="tab4">content for button 4</div> 

• 我需要隱藏在頁面加載的所有標籤。
• 每次用戶點擊一個按鈕，該DIV /標籤它指的應該淡出

Answer 1

不完全是一個完美的一段代碼，但應該做的工作：

window.addEvent('domready',function(){ 

    var tabs = $$('div[id^="tab"]'); 
    tabs.fade('hide'); 

    $$('#buttons li').each(function(element,index){ 
     element.addEvent('click',function(){ 
      tabs.fade(0); 
      tabs[index].fade(1); 
     }); 
    }); 
})​;​ 

Answer 2

你也可以搜索mootools的開拓，看看是否有任何現成的標籤實現的滿足您的需求：

Mootools Forge tab implementations