Add and remove class on click

Question

I have a tab menu, and i want onlick be be added a class="selected" - and on click on one of the other tabs, the class should be removed from the current link, and then be added to the link i've clicked on...

I've tried this but didnt work

$('.tab-links a').click(function(){
   $(this).toggleClass('selected');
});

And the HTML:

<section class="tabs">
<nav class="tab-links">
  <ul>
    <li>
      <a href="/min+side/Mine+favoritter" class="ajax-tab-fav myoptionstab">MIne favoritter</a>
    </li>
    <li>
      <a href="/min+side/Mine+jobagenter" class="ajax-tab-jobagents myoptionstab">Jobagenter</a>
    </li>
    <li class="last">
      <a href="/min+side/Rediger+bruger" class="ajax-tab-edituser myoptionstab">Indstillinger</a>
    </li>
  </ul>
</nav>
<div class="clear">
  <!---->
</div>

Answer 1

var $links = $('.tab-links a');
$links.click(function(){
   $links.removeClass('selected');
   $(this).addClass('selected');
});

this is the target of the click event toggleClass method adds a class if it is not present else removes it.

Therefore when you say $(this).toggleClass('selected'); , The class is added or removed only on the element that was clicked which is clearly not what you want.

Answer 2

Using pure javascript:

function toggleItem(elem) {
  for (var i = 0; i < elem.length; i++) {
    elem[i].addEventListener("click", function(e) {
      var current = this;
      for (var i = 0; i < elem.length; i++) {
        if (current != elem[i]) {
          elem[i].classList.remove('active');
        } else if (current.classList.contains('active') === true) {
          current.classList.remove('active');
        } else {
          current.classList.add('active')
        }
      }
      e.preventDefault();
    });
  };
}
toggleItem(document.querySelectorAll('.link'));

codepen http://codepen.io/8eni/pen/MaGVrq

• Add 'active' class onClick, whilst removing 'active' class from other buttons
• Toggle class onclick

Answer 3

$('.tab-links a').click(function(){
    $('.tab-links a').removeClass('selected')
    $(this).addClass('selected');
});

Answer 4

The given below is awesome and simplest way for addClass and RemoveClass onClick using pure Javascript.

Step: 1 - write the following code in.html file

//... code here
<h1 id="kiran" onclick="myFunction(e)">A</h1>
<h1 id="kiran" onclick="myFunction(e)">B</h1>
<h1 id="kiran" onclick="myFunction(e)">C</h1>
<h1 id="kiran" onclick="myFunction(e)">D</h1>
//... code here

Step: 2 - Write the following in.js file

function handleClick(e) {
        var curr = e.target.textContent;
        var elem = document.querySelectorAll('#kiran');
        for (var i = 0; i < elem.length; i++) {
            if (elem[i].textContent === curr) {
                elem[i].className = 'active';
            } else {
                elem[i].className = '';
            }
        }
    };

Step: 3 - Write the following in.css file

.active {
  color: red;
}

Answer 5

This works for me. try to use this code.

$('.footer-right .cu-btn-ol-round').click(function (e) {
    if ($(this).hasClass("active")) {
        $(this).removeClass("active");
    }
    else {
        $(this).addClass("active");
    }
});