创建一个简单的 mootools 1.2 选项卡系统
题
我正在尝试使用 mootools 1.2 版本创建一个非常简单的选项卡界面。我需要有淡入淡出效果,没有滑动或变形。我尝试在网上找到一些演示,但它们都引用了不同版本的mootools,或者与我的需求相比,它们太复杂了。你能给我一些指导吗?
这是我正在尝试做的事情的图像和示例代码。
替代文本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/选项卡都会淡入。
解决方案
不完全是一段完美的代码,但应该可以完成工作:
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);
});
});
});
其他提示
您还可以搜索 mootools forge 并查看是否有任何现成的选项卡实现适合您的需求:
不隶属于 StackOverflow