Change Div style onclick

Question

I have 2 tabs at the top of a page. When one tab is clicked, I would like that tab to have an "active" class and the other tab to have an "inactive" class so that the user can see what tab is currently selected. How can I go about doing this with javascript/css?

<div class="tabActive">
Option 1
</div>

<div id="tabInactive">
Option 2
</div>

Answer 1

another non-jQuery solution could be the following that works with more than two div :

function changeClass(elClass) {
  var divsLenght = document.getElementsByTagName("div").length;
  for (var i = 0; i < divsLenght; i++) { 
    document.getElementsByTagName("div")[i].className = "tabInactive"; 
  } 
  elClass.className = "tabActive";   
}

Demo: http://jsbin.com/opetec/2

Answer 2

<div class="tabInactive" onclick="this.classname='tabActive'"></div>

if using jquery:

$("div.tabInactive").click(function() {
    $("div.tabInactive").removeClass("tabActive");
    $(this).addClass("tabActive");
});

Answer 3

Give your tabs a class of "tab"... HTML:

<div class="tab">
...
</div>
<div class="tab">
...
</div>

JS:

function getByClass(_class, elem) {
    var i, result = [], elems = document.getElementsByTagName("div"); //get the elements
   for (i = 0; i < elems.length; i++) {
        if (elems[i].className.indexOf(_class) !== -1) { //if the elements have the class passed in, add it to the result array
            result.push(elems[i]);
        }
    }
    return result;
}
var i, tabs = getByClass("tab", "div"); //get all divs with class tab
for (i = 0; i < tabs.length; i++) { //for each tab...
    tabs[i].onclick = function() { //wire up it's click event...
        //to clear the other tabs...
        var j;
        for(j=0; j < tabs.length; j++) {
           tabs[j].className = tabs[j].className.replace(" active", "");
        }
       this.className += " active"; //where active is a class predefined in the CSS 
    };
}

http://jsfiddle.net/thomas4g/pqMq2/12/

Answer 4

here's a solution that doesn't use any jQuery. it does assume there is only 2 tabs thought.

http://jsfiddle.net/nYpV3/

<div id="tab1" onclick="setToActive(this, 'tab2');">
Option 1
</div>

<div id="tab2" onclick="setToActive(this, 'tab1');">
Option 2
</div>

function setToActive(me, otherId){

    me.className='active';
    document.getElementById(otherId).className='inactive';
}

Answer 5

Try this using jQuery

<div class="tab active">
Option 1
</div>

<div class="tab">
Option 2
</div>

<script>
$(function(){
    $(".tab").live("click", function(){
        $(".tab").removeClass("active");
        $(this).addClass("active");
    });
});
</script>

Answer 6

This is my guess:

$('.tabActive, #tabInactive').click(function() {
     $(this).toggleClass('active');
}