Hello!

There is a section highlighting script - adds a class to the parent element. It works even when sending GET-parameters in the address bar and taking into account the catalog nesting. BUT! I have a directory /magazine/male_articles/ , and there are /magazine/male_articles/ , for example /magazine/male_articles/some_category/ . When you go to a category, the class is added to both the current section and the general section /magazine/male_articles/ , that is, this section is main, and the others are nested, and since it is present in the address of each nested link, it is highlighted constantly. How can I remove the backlight from it when choosing subcategories?

The script itself:

 $(function () { $('.magazine_nav ul li a').each(function () { var location = window.location.href var link = this.href var result = location.match(link); if(result != null) this.parentNode.className = "active_article"; }); });
  • @Torawhite, If you are given an exhaustive answer, mark it as correct (click on the check mark next to the selected answer). - Vitalina
  • @Torawhite, they can't help you because you ask the wrong question. I read, I didn’t understand what I needed, I read it again, I spat and scored, although I could have helped, because I know JS and CSS well. The right question is half the solution! - user31688

1 answer 1

You can do, for example, like this:

  $('.magazine_nav li a').each(function () { var location = "http://site.ru/make_url_1/make_sub_url/"; // Вставил для примера в вашем случае это window.location.href // var location = "http://site.ru/make_url_1/"; Для проверки верхнего пункта меню var locationArray = location.split('/'); var locationPath = locationArray[locationArray.length-2]; var link = this.href.split('/'); var linkPath = link[link.length-1]; if(linkPath == locationPath) this.parentNode.className = "active_article"; });

UPD.

Without an example, nowhere, to test the performance, you can uncomment another line with location.

  • @Torawhite, fixed the error, the last element in the url of the array was an empty element, because at the end of the url is "/", so you need to write locationArray.length-2 - MasterAlex
  • @Torawhite, once again corrected, and at the same time made a small example - MasterAlex
  • @Torawhite, I probably missed something, since there is "And again ..." in the question header, but it may be somehow simpler: $ ('. Magazine_nav ul li a [href = "' + location.pathname + ' "] '). addClass (' active_article '); - Deonis
  • @Torawhite, then try the @Deonis option, if it doesn't work, then you have something with styles, but I think it will suit you like this: $ ('. Magazine_nav ul li a [href = "' + location.pathname + '" ] '). parent (). addClass (' active_article '); - MasterAlex
  • @Torawhite links in this form? Then it should work like this: // class for the link itself $ ('. Magazine_nav a [href = "' + location + '"]'). AddClass ('active_article'); // class for parent LI active link $ ('. magazine_nav a [href = "' + location + '"]'). parent ('li'). addClass ('active_article'); - Deonis