Отображение "активной" вкладки в навигации

63
7

Я пытаюсь показать active тег на панели навигации. Он показывает на всех вкладках EXCEPT один с раскрывающимся списком. Я не могу понять, почему он не вызывает класс на этой конкретной кнопке. Я, очевидно, помещаю его в неправильное место. Любая помощь в этом вопросе была бы высоко оценена!

Код: (Первый из них CORRECT - ie - index.php в настоящее время активен. Где я размещаю код (class="active"), чтобы сделать следующую кнопку (ЧТО МЫ ДЕЛАЕМ) активную вкладку при нажатии?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<nav>
<ul class="list-inline">
<li class="active">
<a href="index.php"><i class="fa fa-home"> </i>HOME</a>
</li>
<li class="dropdown" role="presentation">
<a href="#" data-toggle="dropdown">WHAT WE DO <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="whatwedo_qualitative.php">QUALITATIVE</a></li>
<li><a href="whatwedo_quantitative.php">QUANTITATIVE</a></li>
</ul>
</li>
<li> <a href="wherewework.php">WHERE WE WORK</a></li>
<li> <a href="ourclients.php">OUR CLIENTS </a></li>
<li> <a href="contactus.php">CONTACT US</a></li>
</ul>
</nav>

спросил(а) 2016-07-17T16:43:00+03:00 3 года, 8 месяцев назад
1
Решение
81

Если я правильно вас понимаю, вам нужно проверить URL-адрес. (В моем демо я установил его для определенного URL-адреса). Затем добавьте класс к родительскому li.

var page = 'whatwedo_qualitative.php';

var a = $('[href="' + page + '"]');
$('.dropdown').has(a).addClass('active');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar-default">
<ul class="nav navbar-nav list-inline">
<li>
<a href="index.php"><i class="fa fa-home"> </i>HOME</a>
</li>
<li class="dropdown" role="presentation">
<a href="#" data-toggle="dropdown">WHAT WE DO <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="whatwedo_qualitative.php">QUALITATIVE</a></li>
<li><a href="whatwedo_quantitative.php">QUANTITATIVE</a></li>
</ul>
</li>
<li> <a href="wherewework.php">WHERE WE WORK</a></li>
<li> <a href="ourclients.php">OUR CLIENTS </a></li>
<li> <a href="contactus.php">CONTACT US</a></li>
</ul>
</nav>

ответил(а) 2016-07-17T17:03:00+03:00 3 года, 8 месяцев назад
37

вам нужен код javascript для добавления/удаления активного класса к нажатой ссылке.. что-то вроде этого:

$("a").click(function() {  
//remove all active class from a elements
$(this).addClass("active"); //add the class to the clicked element
});

аналогичная функциональность находится здесь: Добавить и удалить класс при нажатии с помощью jQuery?

ответил(а) 2016-07-17T16:53:00+03:00 3 года, 8 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема