How to set menu active link background

Question

I want to set active link background to some color even while moved to clicked URL. I have tried this but it is changing background but while it navigate to clicked URL all things set to default.

I am trying to add active class to clicked menu using JQuery. Code is like this.

HTML

<ul>
      <li class="menu-item"><a href="#">HOME</a></li>
      <li class="menu-item"><a href="#">COMPANY PROFILE</a></li>
      <li class="menu-item"><a href="#">PRODUCTS</a></li>
      <li class="menu-item"><a href="#">CONTACT US</a></li>
      <li class="menu-item"><a href="#">ENQUIRY</a></li>
</ul>

CSS

.menu-item a{
text-decoration: none;
color: #FFF;
font-weight: bold;
padding: 7px 15px;
line-height: 43px;
font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif;
font-size: 13px;
letter-spacing: 1px;
text-shadow: 2px 2px #555;
}
.menu-item a:hover{
background: #871304;
opacity: 0.8;
border-radius: 20px;
}
.menu-item .active{
background-color:#FFF;
color:black;
border-radius: 20px;
}

JQUERY

$(".menu-item a").click(function(){
    $(".menu-item a").addClass('active').siblings().removeClass('active');
    });

Please let me know that where I am making mistake?

If you are changing your HTML then you need a way to store the value or read in wich page you are to identify the active link — DaniP, Oct 21 '14 at 14:08

score 2 · Accepted Answer · answered Oct 21 '14 at 14:18

Your code is good except your jQuery. What you want is to remove any active class applied to any menu-item a element before you apply an active to a new element. Check the jQuery part below:

$(function() {
  $(".menu-item a").click(function() {
    $(".menu-item a").removeClass("active");
    $(this).addClass("active");
  });
});

.menu-item a {
  text-decoration: none;
  color: #FFF;
  font-weight: bold;
  padding: 7px 15px;
  line-height: 43px;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  text-shadow: 2px 2px #555;
}
.menu-item a:hover {
  background: #871304;
  opacity: 0.8;
  border-radius: 20px;
}
.menu-item .active {
  background-color: #871304;
  color: black;
  border-radius: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<ul>
  <li class="menu-item"><a href="#">HOME</a>
  </li>
  <li class="menu-item"><a href="#">COMPANY PROFILE</a>
  </li>
  <li class="menu-item"><a href="#">PRODUCTS</a>
  </li>
  <li class="menu-item"><a href="#">CONTACT US</a>
  </li>
  <li class="menu-item"><a href="#">ENQUIRY</a>
  </li>
</ul>

score 0 · Answer 2 · answered Oct 21 '14 at 14:15

If you are actually going to be linking to different pages, then you need to highlight the menu item for the page that you are on. But it seems like you are probably building a single-page site using a jQuery DOM.

If you just want this to work on a single page, you need to change your JS code. What you have right now is basically saying this:

When a menu item is clicked...
Select all menu items
Add class "active" to them
Select all the siblings for each menu item (which effectively does nothing)
Remove class "active" from them

So this is clearly not what you want . To operate on just the item that was clicked, use the $(this) selector, like so:

$(".menu-item a").click(function(){  // When a menu item is clicked
    $(".menu-item a").removeClass('active'); // Select all menu items and remove active class
    $(this).addClass('active');              // Add active class to THIS menu item (that was clicked)
});

I got this what you say here. But I need to highlight that link even when reached to new page which was clicked previously. — Adi, Oct 21 '14 at 14:19
In that case you can just change the background in the HTML for each page. But if you need to do it programatically, [maybe this link will help you](http://stackoverflow.com/questions/8919406/highlighting-current-page-item-in-the-nav-menu-with-jquery) — Calvin Scherle, Oct 21 '14 at 14:24

How to set menu active link background

2 Answers2