Mootools 1.2教程：实现动态鼠标悬停显示内容的选项卡

本教程将带你学习如何使用Mootools 1.2实现一个基本的“额外信息”标签（TAB）效果，即鼠标悬停时显示内容、鼠标离开时隐藏内容。首先，你需要了解HTML结构，即创建一个包含四个列表项的`<ul>`标签作为菜单，并为每个列表项关联一个对应的`<div>`，初始时使用CSS将内容区块设置为隐藏状态： ```html <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 id="contentone" class="hidden">content for one</div> <!-- 其他三个div同理 --> ``` 接下来，使用Mootools的CSS样式控制内容的显示和隐藏，定义`.hidden`类： ```css .hidden { display: none; } ``` Mootools的核心在于JavaScript部分，你需要编写两个函数：`showFunction`和`hideFunction`，分别在鼠标进入和离开时改变元素的`display`属性： ```javascript var showFunction = function() { this.setStyle('display', 'block'); }; var hideFunction = function() { this.setStyle('display', 'none'); }; ``` 然后在`domready`事件中，为每个菜单项添加事件监听器，当鼠标进入`<li>`时执行`showFunction`，离开时执行`hideFunction`： ```javascript window.addEvent('domready', function() { var elOne = $$('#contentone'); // 获取第一个内容div $('one').addEvents({ mouseenter: function() { showFunction.call(this, elOne); }, mouseleave: function() { hideFunction.call(this, elOne); } }); // 对其他li元素添加类似事件处理 }); ``` 通过以上步骤，你将实现一个基础的Mootools 1.2选项卡效果，当用户鼠标悬停在菜单项上时，相应的内容区块会显示出来，移开鼠标则内容会隐藏。这只是一个起点，你可以进一步美化界面和添加更多的交互功能。