Небольшая проблема с jQuery. Как выделить активный пункт меню?

Question

[Alex_Shevl]

Т.к. я полный 0 в JS и jQuery, дайте ответ как можно понятнее.
Как сделать так, чтобы у активного пункта меня менялся фон?
Нашёл такой скрипт, как применить его к моей ситуации?

$(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" >
		      <li><a href="index.html">ЗДОРОВЬЕ</a></li>
		      <li><a href="ZOJ.html">ЗОЖ</a></li>
		      <li><a href="food.html">ПИТАНИЕ</a></li>
		      <li><a href="hygiene.html">ГИГИЕНА</a></li>
		      <li><a href="sport.html">СПОРТ</a></li>
		      <li><a href="hardening.html">ЗАКАЛИВАНИЕ</a></li>
		      <li><a href="sleep.html">ЗДОРОВЫЙ СОН</a></li>
		      <li><a href="regime.html">РЕЖИМ ДНЯ</a></li>
		      <li><a href="habits.html">ПРИВЫЧКИ</a></li>
		      <li><a href="immunity.html">ИММУНИТЕТ</a></li>
		      <li><a href="culture.html">КУЛЬТУРА</a></li>
		      <li><a href="public health.html">ЗДРАВООХРАНЕНИЕ</a></li>
		      <li><a href="medicine.html">МЕДИЦИНА</a></li>
		      <li><a href="research.html">ИССЛЕДОВАНИЯ</a></li>
		      <li><a href="news.html">НОВОСТИ</a></li>
		    </ul>

CSS:

.active {
	background: #ecc653;
}

Comments

[Ankhena]

window.location.href замените на window.location.pathname

Answer 1

[Exploding]

$(function () {
    var l = location.href;
 
    $("li [href='"+l.split('/').pop()+"']").addClass("active");
    //Но скорее всего надо не к ссылке, а к li, вот так:
    //$("li [href='"+l.split('/').pop()+"']").parent().addClass("active");
});

Comments

[Alex_Shevl]

Это заработало, но не там, где надо.
Ваш код применился к меню в шапке, а мне надо к боковому.

[Exploding]

Alex_Shevl, аа. Тогда добавте #navbar перед li.
$("#navbar li [href=.....

[Alex_Shevl]

Exploding, а это вообще не робит

[Exploding]

Alex_Shevl, $("#navbar li [href='"+l.split('/').pop()+"']").addClass("active");
Вот. Проверьте хтмл. # это обращение по id, а . точка по классу

[Exploding]

Alex_Shevl, ну тогда скидывайте весь код)

[Alex_Shevl]

Exploding, Всё заработало, спасибо вам огромное!

[Exploding]

Alex_Shevl, Ну и отлично!))

[Exploding]

Alex_Shevl, Капслок уберите из анкоров. Или это у вас такие аббревиатуры?) Если очень надо - для этого же естьtext-transform: uppercase;

[Alex_Shevl]

Exploding, Всё как надо)