Просмотр вкладок в PHP с использованием Mootools

Question

Я хотел бы создать представление вкладки, просто скрывая и показывая элемент div с mootools. Я застрял с помощью mootools и запутался.

Следующий список генерируется динамически из php, и мы не можем угадатьидентификатор элементаКогда мы нажимаем на каждый элемент списка;он должен применить активный класс для того же и удалить активный класс из текущего элемента списка.

<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 для того же. Заранее спасибо

Answer 1

вот ваши быстрые вкладки за 10 минут в mootools (лучше всего просматривать в FF из-за быстрого стиля CSS3): 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");
        }
    });

})();

обратите внимание, что я делаю небольшие изменения в разметке, но это должнобыть достаточным, чтобы вы начали