活动状态菜单javascript

Question

I'm having trouble to setup the active state for my menu using URL recognition. What I'm looking to achieve is having the <a href=""> to change to <a id="active" href =""> if you're on the page it links to. This what I have done so far and it seems not working.

Let me know if you have any idea and thanks all for your help!

 $(function(){   
  var url = window.location.href;   
  var page = url.substr(url.lastIndexOf('/')+1);   
   $('.ActiveMenu a[href*="'+page+'"]');   
   $(this).attr({ id: 'active'});});


  <ul id="menu">
   <li id="Link1" class="ActiveMenu"><a href="URL1">Link 1</a></li>
   <li id="Link2" class="ActiveMenu"><a href="URL2">Link 2</a></li>
   <li id="Link3" class="ActiveMenu"><a href="URL3">Link 3</a></li>
  </ul>

Answer 1

so the issue is that your function doesn't know what $(this) is . Instead, you should set target to the correct element and then add a class to it. You shouldn't use id because you should only have one id and it should be a unique identifier, not a state. Class is better suited for it. Let me know if this works for you! :)

DEMO

 $(function(){   
  var url = window.location.href;   
  var page = url.substr(url.lastIndexOf('/')+1);   
   target = $('.ActiveMenu a[href*="'+page+'"]');   
   $(target).addClass('active');
});


  <ul id="menu">
   <li id="Link1" class="ActiveMenu"><a href="URL1">Link 1</a></li>
   <li id="Link2" class="ActiveMenu"><a href="URL2">Link 2</a></li>
   <li id="Link3" class="ActiveMenu"><a href="URL3">Link 3</a></li>
  </ul>

Answer 2

Please add/change the class name instead of Id

$(function(){   
   var url = window.location.href;   
   var page = url.substr(url.lastIndexOf('/')+1);   
   var currentPage=$('.ActiveMenu a[href*="'+page+'"]');   
   currentPage.addClass('active');

});

Answer 3

请用

$(this).attr("id","active");