<ul> <li class="current"><a href="#" >Home</a></li> <li><a href="#" >Services</a></li> <li><a href="#" >About</a></li> </ul> a { background-color: blue; } a:hover { background-color: green; } .selected { background-color: red; color: fff; }

How to implement the selection of the navigation menu item when this page is opened from the menu? Those. The HOME page is open and the menu item connects the class SELECTED. And how is this selection called?

  • one
    look in the direction of hashchange , you will have 3 options: - write a capture of this event yourself - use one of the many jQuery plugins - use a specialized routing library - Specter

3 answers 3

The site is static, right I understand? If so, then (1) make absolute links in the menu, (2) in jQuery:

 $("a").filter(function() { return this.href === document.location.href; }).parent().addClass("selected");
  • Good answer, what I thought was a comparison of the links! - Hancock888

http://www.codeharmony.ru/materials/73 look can help ... if I understood correctly.

  • You understood correctly, but I need to do this without PHP. - Hancock888

I did it like this, and everything works fine!

 $(document).ready(function(){ var str=location.href.toLowerCase(); $('ul li a').each(function() { if (str.indexOf(this.href.toLowerCase()) > -1) { $("li.current").removeClass("current"); $(this).parent().addClass("current"); } }); });