创建一个简单的mootools 1.2选项卡系统

时间:2010-01-25 13:01:43

标签: mootools tabs fadein fadeout

我正在尝试使用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 / tab应该淡入。

2 个答案:

答案 0 :(得分: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);
      });
  });
})​;​

答案 1 :(得分:1)

您还可以搜索mootools伪造,看看是否有任何现成的标签实施适合您的需求:

Mootools Forge tab implementations