使用 Mootools 在 PHP 中查看选项卡答案

【问题标题】：Tab View in PHP using Mootools使用 Mootools 在 PHP 中查看选项卡
【发布时间】：2010-11-24 19:05:20
【问题描述】：

我想通过使用 mootools 隐藏和显示 div 元素来创建一个选项卡视图。我被使用 mootools 卡住并感到困惑。

从 php 动态生成的以下列表，我们无法猜测元素 id。当我们点击每个列表项时；它应该应用相同的活动类并从当前列表项中删除活动类。

<div class="lorem_ipsum">
<div class="lorem">
    <ul id="main_tabs">
        <li id="815" class="active" onclick="tabManage()">Lorem Ipsum</li>
            <li id="816" onclick="tabManage()">John</li>
            <li id="817" onclick="tabManage()">Lorem Text</li>
        <li id="818" onclick="tabManage()">Demo Text</li>
    </ul>
</div>

<script language="javascript">
 function tabManage()
 {

$('815').addClass = "active";

$('816').removeClass = "active";

$('817').removeClass = "active";

$('818').removeClass = "active";
}
</script>

我们如何在 javascript 中应用循环。请任何人都可以帮助我编写相同的javascript脚本函数。在此先感谢

【问题讨论】：

其他选项卡怎么可能不可见？你会如何点击它们？
另外，removeClass 和 addClass 是元素原型中的函数方法，而不是您可以分配的属性。例如，element.removeClass("active")

标签： jquery tabs mootools

【解决方案1】：

这是您在 mootools 中 10 分钟后的快速选项卡（由于快速的 CSS3 样式，在 FF 中查看效果最佳）：http://www.jsfiddle.net/dimitar/THQWn/

(function() {
    // closure - to be run in a domready block.
    var tabs = document.id("main_tabs").getElements("li");
    var output = document.id("output"), divs = output.getChildren();

    tabs.addEvents({
        click: function(e) {
            // clear up all tabs of 'active'
            tabs.removeClass("active");
            // make this active and remove the mouseover effect
            this.addClass("active").removeClass("over");

            // make all content hidden
            divs.addClass("hide");

            // remove hidden class from the div that links to our id.
            output.getElement("div[rel=" + this.get("id") + "]").removeClass("hide");
        },
        mouseenter: function() {
            if (!this.hasClass("active"))
                this.addClass("over"); // not applicable to active
        },
        mouseleave: function() {
            this.removeClass("over");
        }
    });

})();

请注意，我正在对标记进行一些细微的更改，但这应该足以让您开始

【讨论】：