A small problem with jQuery. How to highlight active menu item?

Because I'm a complete 0 in JS and jQuery, give the answer clearly.
How to make an active point of me changing the background?
Found a script, how to apply it to my situation?

$(function () {
 var location = window.location.href;
 var cur_url = '/' + location.split('/').pop();

 $('.navbar li').each(function () {
 var link = $(this).find('a').attr('href');

 if (cur_url == link)
{
$(this).addClass('active');
}
});
});


HTML:
<ul id="navbar">
 the <li><a href="index.html">HEALTH</a></li>
 the <li><a href="ZOJ.html">HLS</a></li>
 the <li><a href="food.html">NUTRITION</a></li>
 the <li><a href="hygiene.html">HYGIENE</a></li>
 the <li><a href="sport.html">SPORTS</a></li>
 the <li><a href="hardening.html">HARDENING</a></li>
 the <li><a href="sleep.html">HEALTHY SLEEP</a></li>
 the <li><a href="regime.html">DAY MODE</a></li>
 the <li><a href="habits.html">HABITS</a></li>
 the <li><a href="immunity.html">IMMUNITY</a></li>
 the <li><a href="culture.html">CULTURE</a></li>
 the <li><a href="public health.html">HEALTH care</a></li>
 the <li><a href="medicine.html">MEDICINE</a></li>
 the <li><a href="research.html">RESEARCH</a></li>
 the <li><a href="news.html">NEWS</a></li>
 </ul>

CSS:
.active {
 background: #ecc653;
}
June 10th 19 at 16:24
1 answer
June 10th 19 at 16:26
Solution
$(function () {
 var l = location.href;

 $("li [href='"+l.split('/').pop()+"']").addClass("active");
 //But most likely it is necessary not to exile, but to the li, like so:
 //$("li [href='"+l.split('/').pop()+"']").parent().addClass("active");
});
It worked, but not where it should be.
Your code applied to the menu in the header, but I have to side. - nikita.Stracke commented on June 10th 19 at 16:29
AA. Then add #navbar li before.
$("#navbar li [href=..... - Leda15 commented on June 10th 19 at 16:32
and this is not Robit - nikita.Stracke commented on June 10th 19 at 16:35
, $("#navbar li [href='"+l.split('/').pop()+"']").addClass("active");
Here. Check out hypertext markup language. # this address for id and . point class - Leda15 commented on June 10th 19 at 16:38
well , then throws the whole code) - Leda15 commented on June 10th 19 at 16:41
, It worked, thank you very much! - nikita.Stracke commented on June 10th 19 at 16:44
Well and well!)) - Leda15 commented on June 10th 19 at 16:47
, Kapslok, remove from anchor. Or it you have these abbreviations?) If you really need - it also hastext-transform: uppercase; - Leda15 commented on June 10th 19 at 16:50
All as it should) - nikita.Stracke commented on June 10th 19 at 16:53

Find more questions by tags JavaScriptjQuery