Question

Like this, I have two tabs, so when i click on one it’s active, logic. Now im trying to make difference between active and inactive tab, but not with .css property, but I wanna’ add specific class to clicked tab, like this:

$(".tab1").addClass('active');

but, no good. Also have in mind that I’m using external css file.

<div id="menuitem" class="tab1"></div>
<div id="menuitem" class="tab2"></div>

.active {
    width: 170px;
    height: 70px;
    float: right;
    background-color: red;
}

#menuitem {
    width: 170px;
    height: 70px;
    float: right;
    background-color: white;
}

Answer 1

First of all don’t use same id on different elements, id‘s must be unique and try this:

jQuery:

$('.menuitem').click(function() {
    $('.menuitem').removeClass('active');
    //removes active class from all menu items

    $(this).addClass('active');
    //adds active class to clicked one
});

html:

<div id="tab1" class="menuitem"></div>
<div id="tab2" class="menuitem"></div>

css: you don’t need to define same properties to active class, just define the difference:

.active { background-color: red; }

.menuitem {
  width: 170px;
  height: 70px;
  float: right;
  background-color: white;
}