I would like to create a tab view for my php application using Mootools. I have n number of tabs created from php script. My view is as follows.

<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>

How can apply style class active according to the clicks on Populalar or New Addition under each tabs.

Thanks

I would like to create a tab view for my php application using Mootools. I have n number of tabs created from php script. My view is as follows.

<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>

How can apply style class active according to the clicks on Populalar or New Addition under each tabs.

Thanks

• javascript
• mootools

3 Answers 3

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

Try an example.

Here's how to do it in 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;
        }
    });
});

Update: Here's an improved version, thanks @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');
    });
});

It requires the root div to have the id "containerId":

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

object.className = 'active';

( Where object is what you want to highlight )