Почему Класс active срабатывает только после обновления страницы?

Question

[smoklew]

По какой причине класс active срабатывает только после обновления страницы браузера?

<div class="nav">
	<ul>
			<li><img src="img/parts.png"><a href="#parts">Запчасти</a></li>
			<li><img src="img/about.png"><a href="#aboutcompany" id="company">О компании</a></li>
			<li><img src="img/delivery.png"><a href="#delivery">Доставка</a></li>
			<li><img src="img/pay.png"><a href="#pay">Оплата</a></li>
			<li><img src="img/contacts.png"><a href="#contacts">Контакты</a></li>
			<li><img src="img/order.png"><a href="#order">Заявка</a></li>
	</ul>
</div>

.nav
{
width: 100%;
text-align: center;
padding: 7px 0px ;
background: #485971;
}
.nav li
{
display: inline-block;
}
.nav a
{
padding: 5px 15px 1.5px 10px;
font-size: 14px;
color: #fff;
}
.nav a:hover
{
text-decoration: none;
border-bottom: 3px dotted #ead100;
}
.active
{
text-decoration: none;
border-bottom: 3px dotted #ead100;
}

$(function () {                                      // Когда страница загрузится
    $('.nav a').each(function () {             // получаем все нужные нам ссылки
        var location = window.location.href; // получаем адрес страницы
        var link = this.href;                // получаем адрес ссылки
        if(location == link) {               // при совпадении адреса ссылки и адреса окна
            $(this).addClass('active');  //добавляем класс
        }
    });
});

Answer 1

[Иван Беленков]

// Когда страница загрузится
// получаем все нужные нам ссылки

Очевидно, потому что вы присваиваете класс active только при загрузке страницы. Когда вы нажимаете на ссылку - ваша функция не срабатывает, но window.location.href меняется. В общем, вам необходимо исполнять тот же код, при клике на ссылку.

Answer 2

[al3ch5]

Как я понял из кода ты хочешь, чтобы отображалась (тире выделялась страница на которой ты сейчас находишься). По поводу js ничего не скажу, т.к мало опыта в нем. Но твою проблему можно решить через CSS.
Для каждого раздела в пункту меню создаешь страницу *.html , и в теге body или в другой глобальной обертке задаешь класс например class="parts" class="company" и т.д.
После этого пишешь объединенный селектор. в главной таблице стилей:

.parts, .company, .contacnts{
  text-decoration: none;
  border-bottom: 3px dotted #ead100;
}

и вуаля - теперь когда ты будешь находится на той или иной странице, будет подтягиваться класс из таблицы стилей, а остальные классы вообще не будут видны т.к. они находятся в другом месте.

Answer 3

[Александр]

допишите функцию для клика

$('.nav a').click(function () {  
    $('.nav a').removeClass('active');
    $(this).addClass('active');
}