CODEWITHSUNDEEP
jquery
thank_K
thank_K

Reputation: 71

Swapping class on li a

I am having trouble swapping the class so when you click the menu and it turns green, it stays green afterwards, then when you click the next menu it swaps again.

Fiddle https://jsfiddle.net/3ognmb4h/

js

$('.menuActive').on('click', function(e) {
  $('.menuswap').toggleClass("menu"); //you can list several class names 
  e.preventDefault();
});

Upvotes: 0

Views: 24

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

There are two problems with your current approach:

  • You need to swap your .menu li a selector and your .toggleClass(). Instead of $('.menuswap').toggleClass("menu li a"), you actually want
    $('.menu li a').toggleClass("menuswap").
  • You add color: #444 !important to .menu li a, which gives it the maximum level of specificity (meaning you can never overwrite the specificity). You need to remove this !important declaration, and also give your .menuswap selector more specificity than
    .menu li a. I've gone with .menu li a.menuswap.

Also, you probably only want the element you're clicking on to be highlighted, rather than every menu item. For this, you can substitiute your $('.menu li a') selector with a simple $(this).

To turn off the highlight when another element is clicked, the easiest approach is to simply turn all of the elements back to the default colour and then apply the green highlight to the desired element.

This can be seen in the following example:

$('.menuActive').on('click', function(e) {
  e.preventDefault();
  $('.menu li a').removeClass("menuswap"); // remove highlight from all elements
  $(this).toggleClass("menuswap"); // add highlight to clicked element
});
.menu {
  float: right;
  text-decoration: none !important;
  z-index: 9999;
}

.menu li {
  cursor: pointer;
  opacity: 1;
  float: right;
  display: inline;
  text-transform: uppercase;
  list-style: none;
  padding-left: 0.8em;
}

.menu li a {
  text-decoration: none !important;
  color: #444;
  cursor: pointer;
  -webkit-transition: background 2s;
  /* For Safari 3.1 to 6.0 */
  transition: background 2s;
}

.menu li a:hover {
  color: #3CE33E !important;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}

.menu li a:active {
  text-decoration: none !important;
  color: #B8E5FF;
  cursor: pointer;
}

.menu li a.menuswap {
  text-decoration: none !important;
  color: #44E163;
  cursor: pointer;
}

.menuf {
  font-size: 1.250em !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row-fluid menubar">
  <div class="menubarright">
    <div class="noselect menu">
      <ul class="menuf">
        <li><a class="menuActive" id="register-m" href="#home/register">Sign Up</a></li>
        <li class="white">|</li>
        <li><a class="menuActive" id="contactus-m" href="#home/our-partners">Partners</a></li>
        <li><a class="menuActive" id="ourteam-m" href="#home/ahimsa-citizenship">Citizenship</a></li>
        <li><a class="menuActive" id="aboutus-m" href="#home/our-ethos">Ethos</a></li>
        <li><a class="menuActive" id="home-m" href="#homepage">Home</a></li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions