Как подсветить активный пункт меню?

Question

[Илья]

Как подсветить активный пункт меню? Нужно добавить к li класс active.

<div class="navbar-collapse collapse">
					<ul class="nav navbar-nav">
						<li><?=anchor('', 'Dashboard');?></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Social feed <span class="caret"></span></a>
							<ul class="dropdown-menu" role="menu">
								<li><a href="#">Twitter</a></li>
								<li><a href="#">Vk</a></li>
								<li><a href="#">FB</a></li>
								<li><a href="#">Instagram</a></li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Users <span class="caret"></span></a>
							<ul class="dropdown-menu" role="menu">
								<li><?=anchor('users_admin', 'Admin panel');?></li>
								<li><?=anchor('users_api', 'Application');?></li>
							</ul>
						</li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Hello, <?=$this->session->userdata('login');?> <span class="caret"></span></a>
							<ul class="dropdown-menu" role="menu">
								<li><?=anchor('users_api', 'Profile');?></li>
								<li><?=anchor('logout', 'Logout');?></li>
							</ul>
						</li>
					</ul>
				</div>

Делаю так.

<script type="text/javascript">
			$(document).ready(function(){
				var link = window.location.pathname;
				$('.nav li a[href="'+link+'"]').parents('li').addClass('active');
			});
		</script>

Не работает. Подскажите, как исправить. Буду благодарен.

Answer 1

[Rad1calDreamer]

Во-первых, все таки правильно это делать при формировании страницы на php.
Ну а во-вторых, если уж вам так надо это сделать скриптом то попробуйте вот так

$(document).ready(function() {
			var link = window.location.pathname;
			$('.nav li.active').removeClass('active');
			$('.nav li a').each(function() {
					if ($(this).attr('href' == link) {
							$(this).parent('li').addClass('active');
						}
					});
			});
	});

Comments

[Илья]

Спасибо за помощь. Но у вас в синтаксисе ошибка.
Вот так правильнее.

$(document).ready(function() {
				var link = window.location.href;
				$('.nav li.active').removeClass('active');
				$('.nav li a').each(function() {
					if ($(this).attr('href') == link) {
						$(this).parent('li').addClass('active');
					};
				});
			});

Answer 2

[Виталий Киренков]

А вас не посещала мысль, что это будет правильнее сделать на php?

Comments

[Илья]

Работу верстки перенести на backend? Увольте.

[Виталий Киренков]

Работу?!)) Вы в смоём уме? На пыхе на активный пункт вешать класс active, а в стилях для него подставить цвет или подчёркивание, не знаю что у вас там по макету...
Что в этом сложного??? Вы уже на написание этого вопроса потратили больше времени...

Answer 3

[A K]

Это делается в бекэнде