Highlight active link on menu

1

votes

I am using some jquery code to highlight the current active page on my site. It is working great for the page. but when I am linking the menu to any div id it is not highlighting. how can I make it work for id as well. Here is my code:

$(function() {
    // this will get the full URL at the address bar
    var url = window.location.href;

    // passes on every "a" tag 
    $(".menu_holder a").each(function() {
        // checks if its the same on the address bar
        if (url == (this.href)) {
            $(this).closest("li").addClass("active");
        }
    });
});

javascriptjquerymenuhighlight

can you post a fiddle with the problem? I don't understand what you mean by "linking the menu to any div id" - Massimiliano Carosi

say I have a div which id is #contact . I have a menu named contact, I have linked this div to that contact menu. when I click on the contact link it is scrolling to that #contact div but It is not highlighting as active section. - t.i.rony

Please share some HTML. - Mottie

0

votes

I suppose that for menu you use

well try this change ul.nav with your class

        var url = window.location;
        var element = $('ul.nav a').filter(function() {
            return this.href == url || url.href.indexOf(this.href) == 0;
        }).addClass('active').parent().parent().addClass('in').parent();
        if (element.is('li')) {
            element.addClass('active');
        }

cheers!!

0

votes

Based on the comments, I assume that you are trying to highlight the div as well the menu clicked.

You can use the below code. It will scroll the div as well as highlight the target div as well as the menu linked clicked.

$(function() {
// this will get the full URL at the address bar
var url = window.location.href;

$(".menu_holder a").on('click',function(event) {
 
        event.preventDefault();
        var selectedDiv = $(this).attr('href');
  
          $('html, body').animate({
              scrollTop: $(selectedDiv).offset().top - 20
          }, 'slow');
        
        $(selectedDiv).addClass("active");
        $(this).addClass("active");

  });
});

#contact {
  margin-top: 1000px;
  height:50px;
  width:50px;
}

.active
{
  background-color : red;
  color:#fff;
}

<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
     <script src="script.js"></script>
  </head>

  <body>
   <div class="menu_holder">
    
     <a href="#">Home</a>
     <a href="#contact">contact</a>
   </div>
   <div id="contact">
     contact section
   </div>
  </body>

0

votes

Suppose you have this html:

<div class="Menu">
  <a href="#Div1">Div 1</a>
  <a href="#Div2">Div 2</a>
</div>

<div id="Div1">
  content 1
</div>

<div id="Div2">
  content 2
</div>

if you want to highligth the anchor after the click you can use this code that merges yours and adds what you are looking for:

var url = window.location.href;

$(".Menu a").each(function(e) {
  if (url == (this.href)) {
    $(this).addClass("Active");
  }
}).on("click", function(e) {
    var a = this;
    setTimeout(function() {
      if (window.location.href == a.href) 
        $(a).addClass("Active");
    }, 0);
});

I used setTimeout (..., 0) to make the browser process the click and change the location.

0

votes

That is because window.location.href gives you the actual, absolute URL of the page -- for example, http://stackoverflow.com/questions/38541730/highlight-active-link-on-menu#contact. But, most probably your link has an href that is relative -- basically, this.href is probably just #contact.

I think a better solution would be to use a regular expression like this to get the relative url:

window.location.href.match(/#.*/) //gives you $contact"

EDIT: Thanks to Mottie, here's an even better solution:

window.location.hash //gives you "#contact"

Highlight active link on menu

4 Answers