Изменить стиль Div по клику

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

вот решение, которое не использует 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 3

Дайте вашим вкладкам класс "вкладки" 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 4

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

при использовании jquery:

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

Answer 5

Это мое предположение:

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

Answer 6

Попробуйте это с помощью 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>