CODEWITHSUNDEEP
jquerycsshtml
Milos Vujinic
Milos Vujinic

Reputation: 67

How to remove/add active class to a element in Jquery?

Can somebody help me, I am havig trouble figuring out how to remove/add active class for vertical menu?

HTML

<ul class="vertical__menu">
  <li>
    <a class="vertical__menu-item--active" href="#">Truck Route</a>
  </li>
  <li>
    <a class="vertical__menu-item" href="#">Location Map</a>
  </li>
  <li>
    <a class="vertical__menu-item" href="#">Major Retailers Map</a>
  </li>
</ul>

CSS

.vertical__menu-item {
  color: blue
}
.vertical__menu-item--active {
  color: red    
}

JQUERY

$(document).ready(function () {
  $('ul.vertical__menu li a').click(function () {
    $('vertical__menu-item').removeClass("--active");
    $(this).addClass("--active");
  });
});

Upvotes: 2

Views: 407

Answers (3)

Lemayzeur
Lemayzeur

Reputation: 8525

Why don't you just seperate the vertical__menu-item to active

html

<ul class="vertical__menu">
    <li><a class="vertical__menu-item active" href="#">Truck Route</a></li>
    <li><a class="vertical__menu-item" href="#">Location Map</a></li>
    <li><a class="vertical__menu-item" href="#">Major Retailers Map</a></li>
</ul>

style.css

.vertical__menu-item {
    color: blue
}
.vertical__menu-item.active {
    color: red    
}

jquery

$(document).ready(function () {
    $('ul.vertical__menu li a').click(function () {
        $('.vertical__menu-item').removeClass("active");
        $(this).addClass("active");
    });
});

Upvotes: 2

Danny
Danny

Reputation: 1113

You need to add/remove the class .vertical__menu-item--active, in your code currently you are removing the class --active which doesn't exist in your css. You're also not selecting items currently in your jquery and you're missing .vertical__menu-item on the first list item in your mark up so it will not be selected when you're trying to remove the .vertical__menu-item--active class, check the working demo below:

$(document).ready(function () {
  $('.vertical__menu-item').click(function () {
    $('.vertical__menu-item').removeClass("vertical__menu-item--active ");
    $(this).addClass("vertical__menu-item--active ");
  });
});
.vertical__menu-item {
  color: blue
}
.vertical__menu-item--active {
  color: red    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="vertical__menu">
  <li>
    <a class="vertical__menu-item vertical__menu-item--active" href="#">Truck Route</a>
  </li>
  <li>
    <a class="vertical__menu-item" href="#">Location Map</a>
  </li>
  <li>
    <a class="vertical__menu-item" href="#">Major Retailers Map</a>
  </li>
</ul>

Upvotes: 2

Temani Afif
Temani Afif

Reputation: 272901

You have to remove the class from the previous active element then add it to the new one considering the full class name and not only its suffix --active:

$(document).ready(function() {
  $('ul.vertical__menu li a').click(function() {
    /*Select only the active element without forgeting the '.' */
    $('.vertical__menu-item--active').removeClass("vertical__menu-item--active");
    /*Adding the class to the current one*/
    $(this).addClass("vertical__menu-item--active");
  });
});
.vertical__menu-item {
  color: blue
}

.vertical__menu-item--active {
  color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="vertical__menu">
  <li>
    <a class="vertical__menu-item--active" href="#">Truck Route</a>
  </li>
  <li>
    <a class="vertical__menu-item" href="#">Location Map</a>
  </li>
  <li>
    <a class="vertical__menu-item" href="#">Major Retailers Map</a>
  </li>
</ul>

Upvotes: 2

Related Questions