DOM Lab - UI Tabs

by Diarmuid Dunne

HTML

<div class="tabbed">
    <ul>
        <li class="active"><a href="#tab1">Tab 1</a>
        </li>
        <li><a href="#tab2">Tab 2</a>
        </li>
        <li><a href="#tab3">Tab 3</a>
        </li>
    </ul>
    <div id="tab1">Tab 1</div>
    <div id="tab2">Tab 2</div>
    <div id="tab3">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 divName = document.getElementsByClassName('tabbed');
console.log(divName);

var tab1 = document.getElementsByTagName('li')[0];
//var id1 = document.getElementsByTagName('id')[0];

var tab2 = document.getElementsByTagName('li')[1];
//var id2 = document.getElementsByTagName('id')[1];

var tab3 = document.getElementsByTagName('li')[2];
//var id3 = document.getElementsByTagName('id')[2];

tab1.onclick = function(){
    resettab();
    tab1.classList.add("active");
    //tab2.classList.remove("active");
    //tab3.classList.remove("active");
    console.log("tab 1 active");
}

tab2.onclick = function(){
    resettab();
    tab2.classList.add("active");
    console.log("tab 2 active");
}

tab3.onclick = function(){
    resettab();
    tab3.classList.add("active");
    //tab1.classList.remove("active");
    //tab2.classList.remove("active");
    console.log("tab 3 active");
}

function resettab()
{
    var liElement =  document.getElementsByTagName('li');
 	for(var i = 0; i < liElement.length; i ++)
    {
        liElement[i].classList.remove("active");
    }
}