更改 Div 样式 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 的解决方案！它确实假设只有 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';
}

Answer 4

为您的选项卡指定“选项卡”类别...
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 5

使用 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

这是我的猜测：

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