Change Div style onclick

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 开发者_C百科can I go about doing this with javascript/css?

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

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

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

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

if using jquery:

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

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';
}

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/

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>

This is my guess:

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