DOM Lab - UI Tabs

by Colin Cheevers

HTML

<div class="tabbed">
    <ul>
        <li class="active"><a href="#tab1" id="tab1">Tab 1</a>
        </li>
        <li><a href="#tab1" id="tab2">Tab 2</a>
        </li>
        <li><a href="#tab1" id="tab3">Tab 3</a>
        </li>
    </ul>
    <div id="tab1a">Tab 1</div>
    <div id="tab2b">Tab 2</div>
    <div id="tab3c">Tab 3</div>
</div>

CSS

.tabbed ul {
    list-style:none;
    margin:0;
    padding:0;
}
.tabbed ul li {
    float:left;
    position:relative;
    background-color:#fff;
    margin-bottom:-1px;
}
.tabbed ul li a {
    display:block;
    padding:3px 5px;
    border:1px solid #ccc;
    border-bottom:0;
    color:green;
    text-decoration:none;
}
.tabbed ul li.active a {
    border-bottom:1px solid #fff;
}
.tabbed > div {
    border:1px solid #ccc;
    clear:both;
    padding:10px;
}
.tabbed > div {
    display:none;
}
.tabbed > div:first-of-type {
    display:block;
}

JavaScript

// Build some basic UI tabs
//
// Desired behavior:
//
// When user clicks a tab
//    that tab becomes marked as "active"
//    any other active tabs are no longer active
//    the related div (by id) is displayed
//    any other unrelated divs are hidden
//
// Hint:
//    You'll use the "click" event, and delegation is best

var tab1 = document.getElementById("tab1");
var tab2 = document.getElementById("tab2");
var tab3 = document.getElementById("tab3");

tab1.onclick = function (e) {
    console.log(e); // the event
    console.log(this); // refers to element
    tab1.className="active";
    tab2.className="";
    tab3.className="";
    return false;
}

tab2.onclick = function (e) {
    console.log(e); // the event
    console.log(this); // refers to element
    tab1.className="";
    tab2.className="active";
    tab3.className="";
    return false;
}

tab3.onclick = function (e) {
    console.log(e); // the event
    console.log(this); // refers to element
    tab1.className="";
    tab2.className="";
    tab3.className="active";
    return false;
}

tab1.addEventListener('click',
    function (e) {
        console.log("Tab1 clicked", e);
    },
    false // use capture method
);

tab2.addEventListener('click',
    function (e) {
        console.log("Tab2 clicked", e);
    },
    false // use capture method
);

tab3.addEventListener('click',
    function (e) {
        console.log("Tab3 clicked", e);
    },
    false // use capture method
);