如何使用Mootools或Javascript激活樣式類？

Question

我想使用Mootools為我的php應用程序創建一個標簽視圖。 我有n個從php腳本創建的選項卡。 我的看法如下。

<div>
<ul id="1">
    <li>Popular</li>
    <li>New Addition</li>
</ul>
</div>
<div>
<ul id="2">
    <li>Popular</li>
    <li>New Addition</li>
</ul>
</div>
...
<div>
<ul id="n">
    <li>Popular</li>
    <li>New Addition</li>
</ul>
</div>

如何根據每個選項卡下對Populalar或New Addition的單擊來active應用樣式類。

謝謝

Answer 1

var tabs = document.getElements('li');
tabs.addEvent('click', function() {
    tabs.removeClass('active');
    this.addClass('active');
});

嘗試一個例子 。

Answer 2

這是在MooTools中執行的方法：

var activeElement = null;
$$('div ul li'
   /* you probably want a better selector,
      how about giving a parent element an id? */
  ).each(function(item){
    item.addEvent('click',function(event){
        $(event.target).addClass('active');
        if(activeElement != event.target){
            if(activeElement!=null)
                $(activeElement).removeClass('active');
            activeElement = event.target;
        }
    });
});

更新：這是一個改進的版本，感謝@steweb ， 來源 ：

$$('#containerID li').each(function(item){
    item.addEvent('click',function(event){
        // minor improvement to steweb's code,
        // restrict to .active inside container
        $$('#containerID .active').removeClass('active');
        this.addClass('active');
    });
});

它要求根div具有ID“ containerId”：

<div id="containerId">
<ul id="1">
<!-- etc -->

Answer 3

object.className ='活動';

（對象是您要突出顯示的地方）