Change div style onclick

Question

我在页面的顶部有2个选项卡。当单击一个选项卡时，我希望该选项卡具有“活动”类，另一选项卡具有“非活动”类，以便用户可以看到当前选择的选项卡。我怎么能用javascript/css来做这件事？

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

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

Answer 1

另一个非jQuery的解决方案可能是有两个以上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"; 
} 

演示：http://jsbin.com/opetec/2

Answer 2

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

如果使用jQuery：

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

Answer 3

试试这个使用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 4

这是我的猜想：

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

Answer 5

给哟乌尔标签类 “标签” 的... 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 6

这里是不使用任何的jQuery的解决方案！它确实认为只有2个标签认为。

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