如何使用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'); 
}); 

嘗試一個example。

Answer 2

object.className ='active';

（如果對象是你想要什麼突出）

Answer 3

這裏是如何做到這一點在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，source：

$$('#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 -->