Mootools 1.2教程 选项卡效果（Tabs）
2024-05-06 14:14:00
供稿：网友
简单的“额外信息”标签（TAB）
鼠标移上去显示内容的TAB
在这第一个项目中，我们要创建一个简单的菜单，当鼠标移动到这些菜单上时显示相应的内容。首先，我们来完成HTML代码——我们就用包含四个列表项的ul好了，然后再创建四个div（每一个div对应一个列表项）：
参考代码：
代码如下:
// 这里是我们的菜单
<ul id="tabs">
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
<li id="four">Four</li>
</ul>
// 这里是我们的内容div
<div id="contentone" class="hidden">content for one</div>
<div id="contenttwo" class="hidden">content for two</div>
<div id="contentthree" class="hidden">content for three</div>
<div id="contentfour" class="hidden">content for four</div>
现在，我们不需要关心怎么把它们做得漂亮。在CSS中，我们要做的全部事情就是把内容区块隐藏起来：
参考代码： [复制代码] [保存代码]
.hidden {
display: none;
}
好了，现在开始写MooTools代码。如果我们需要当用户把鼠标移上去的时候显示内容，当鼠标离开的时候隐藏内容，我们需要完成这样两个函数：
参考代码：
代码如下:
var showFunction = function() {
this.setStyle('display', 'block');
}
var hideFunction = function() {
this.setStyle('display', 'none');
}
还有一些事件：
参考代码：
代码如下:
window.addEvent('domready', function() {
// 这里我们可以把容器元素赋值给一个变量
var elOne = $('contentone');
$('one').addEvents({
// 当鼠标进入的时候，我们调用showFunction
// 并绑定这个元素elOne
// 因此我们需要把它作为函数参数
'mouseenter': showFunction.bind(elOne),
'mouseleave': hideFunction.bind(elOne)
});
});
现在，我们只需要为每个tab重复这个模式，并指定对应的内容区块就可以了。下面是完整的代码：
参考代码： [复制代码] [保存代码]
// 这里是用来改变样式的函数
var showFunction = function() {
this.setStyle('display', 'block');
}
var hideFunction = function() {
this.setStyle('display', 'none');
}
window.addEvent('domready', function() {
// 在这里我们把我们的内容块赋值给不同变量
var elOne = $('contentone');
var elTwo = $('contenttwo');
var elThree = $('contentthree');
var elFour = $('contentfour');
// 给tab绑定事件
$('one').addEvents({
// 设置事件类型
// 并给事件控制函数绑定相应的变量
'mouseenter': showFunction.bind(elOne),
'mouseleave': hideFunction.bind(elOne)
});
$('two').addEvents({
'mouseenter': showFunction.bind(elTwo),
'mouseleave': hideFunction.bind(elTwo)
});
$('three').addEvents({
