Question

I am making some tabbed content, I have the tabs inline and overlapping each other slightly, meaning they have three states: inactive tab (“it” class), active tab (“at” class) and trailing tab (“tt” class) which follows the active tab. In the code sample below, tab three is active and tab four is the trailing tab as it comes after it.

<div id="tabnest">
    <div id="tab" class="it"><a href="#" onclick="#">Tab One</a></div>
    <div id="tab" class="it"><a href="#" onclick="#">Tab Two</a></div>
    <div id="tab" class="at"><a href="#" onclick="#">Tab Three</a></div>
    <div id="tab" class="tt"><a href="#" onclick="#">Tab Four</a></div>
    <div id="tab" class="it"><a href="#" onclick="#">Tab Five</a></div><br>
</div>
<div id="content">
</div>

I’m a total newbie to JavaScript I’d like each tab when clicked to:
1. change all the other tabs classes to “it”,
2. change the current, clicked tab class to “at” and
3. change the next tabs class to “tt” if one exists.

From research on the net, I understand that these are the functions I want roughly:

document.getElementById('tab').nextSibling;
document.getElementById('tab').className = "it";

I just don’t know how to call a function and stich it up together. Sorry for the complicatedness of this, if it’s impossible to call the next div/tab and change its class solely then don’t worry, could you just help me change the selected tabs class and all the others please? Thanks in advance.

Answer 1

See http://jsfiddle.net/E7jnq/1/ for a jQuery implementation, or http://jsfiddle.net/ryMH3/ for a vanilla JS implementation.

jQuery:

$(document).ready(function()
{
    $('#tabnest a').click(function()
    {
        $(this).parent().parent().find('div').removeClass('at').removeClass('tt').addClass('it'); // Set everything to 'it'
        $(this).parent().addClass('at'); // Set this div to 'at'
        if ($(this).parent().next('div').length > 0)
        {
            $(this).parent().next('div').addClass('tt');
        }
    });
});

Vanilla JS:

var tabNest = document.getElementById('tabnest');
var tabs = getElementsByClassName('tab');


for (i = 0; i < tabs.length; i++)
{
    addEventListener(tabs[i], 'click', function ()
    {
        for (i = 0; i < tabs.length; i++)
        {
            if (tabs[i] == this)
                this.className = 'tab at';
            else if (tabs[i - 1] == this)
                tabs[i].className = 'tab tt';
            else
                tabs[i].className = 'tab it';
        }
        this.className = 'tab at';

    }, false);
}

function getElementsByClassName(classname, node)
{
    if(!node) node = document.getElementsByTagName("body")[0];
    var a = [];
    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))
            a.push(els[i]);
    return a;
}

function addEventListener(element, eventType, handler, capture)
{
    if (element.addEventListener)
        element.addEventListener(eventType, handler, capture);
    else if (element.attachEvent)
        element.attachEvent("on" + eventType, handler);
}