Как я могу активировать класс стилей на клике, используя Mootools или Javascript?

Question

Я хотел бы создать представление вкладки для моего приложения php с помощью Mootools. У меня есть 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>

Как применить класс стилей active в зависимости от нажатия на Populalar или New Addition под каждой вкладкой.

Спасибо

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 , 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 имел идентификатор «containerId»:

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

Answer 3

object.className = 'active';

(где объект - это то, что вы хотите выделить)