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