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

发布于 2024-08-19 02:30:26 字数 927 浏览 8 评论 0原文

我正在尝试使用 mootools 1.2 版本创建一个非常简单的选项卡界面。我需要有淡入淡出效果，没有滑动或变形。我尝试在网上找到一些演示，但它们都引用了不同版本的mootools，或者与我的需求相比，它们太复杂了。你能给我一些指导吗？

这是我正在尝试做的事情的图像和示例代码。

替代文本 http://img204.imageshack.us/img204/4983/tabsd.jpg< /a>

<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/选项卡都会淡入。

原文

I'm trying to create a very simple tab interface using the mootools 1.2 version. I need to have a fadein-fadeout effect, no sliding or morphing. I've tried to find some demos online but they all refer to different versions of mootools or they are too complicated comparing to my needs. Can you please give me some guidelines?

This is an image of what I'm trying to do and a sample code.

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>

I need all tabs to be hidden when page loads.
each time user clicks a button, the div/tab it's referring to should fade in.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心安伴我暖 2024-08-26 02:30:26

不完全是一段完美的代码，但应该可以完成工作：

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);
      });
  });
});

Not exactly a perfect piece of code but should do the job:

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);
      });
  });
});

回复收藏 0 原文