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");
});