Добавить активный класс в родительский li, когда дочерняя ссылка активна

Question

У меня есть навигация с выпадающими списками и вы хотите иметь другой стиль в ссылке, если вы находитесь на странице в этом разделе. Я использую в основном Bootstrap, поэтому есть много css. Вот то, что HTML выглядит на пару секций:

<li class='dropdown'> 
    <a href='#' class='dropdown-toggle' data-toggle='dropdown'>General Info<span class='caret'></span></a> 
    <ul class='dropdown-menu' role='menu'> 
     <li><a href='/email_list.php'>Employee Directory</a></li> 
     <li><a href='/docs.php'>Documents</a></li> 
     <li><a href='/ftp.php'>FTP</a></li> 
     <li><a href='/manage/'>Manage</a></li> 
     <li><a href='/flyspray'>Bug/Feature Tracking</a></li> 
    </ul> 
</li> 
<li class='dropdown'> 
    <a href='#' class='dropdown-toggle' data-toggle='dropdown'>Job Info<span class='caret'></span></a> 
    <ul class='dropdown-menu' role='menu'> 
     <li><a href='/job/list'>Job List</a></li> 
     <li><a href='/files_required.php'>Files Rqrd</a></li> 
     <li><a href='/incoming_list.php'>Incoming Data List</a></li> 
     <li><a href='/signoff.php'>Signoffs</a></li> 
     <li><a href='/leader_list2.php'>Leader List</a></li> 
     <li><a href='/milestones'>Milestone/Timelines</a></li> 
    </ul> 
</li> 

Так, например, если кто-то на странице списка заданий, информация Работа будет подсвечен.

EDIT: Я знаю, что это невозможно сделать только с помощью CSS. Поиск ответа с использованием JavaScript или PHP. Спасибо

Answer 1

Сравнить удерживающее звено href к location.pathname и поперек вверх по йоту добавить active класс

Вот jsFiddle Demo

JQuery

Когда Линк href равно текущее имя пути (/link.php), ему будет присвоен класс active и li с классом dropdown, что ссылка является внутри будет предоставлен класс active, который позволит вам их стилизовать.

$('.dropdown a').filter(function(){ 

    return $(this).attr('href') == location.pathname 

}).addClass('active').closest('ul').parent().addClass('active'); 

CSS

Используйте nth-child, чтобы получить дочерний элемент, выбранный по индексу, в основном - выбрать активный Выпадающий стиль

.dropdown.active:nth-child(1) { 
    /* first dropdown */ 
} 

.dropdown.active:nth-child(2) { 
    /* second dropdown */ 
} 

.dropdown a.active { 
    /* any active link */ 
} 

---

Высший сорт Вариант

Используя выше JQuery, вы можете добавить класс к каждому .dropdown стилизовать индивидуально с большей читаемости

Вот это jsFiddle Demo

HTML

<li class='general-info dropdown'> 
    <ul class='dropdown-menu' role='menu'> 
    <!-- --> 
    </ul> 
</li> 

<li class='job-info dropdown'> 
    <ul class='dropdown-menu' role='menu'> 
    <!-- --> 
    </ul> 
</li> 

CSS

.general-info.active { 
    /* first dropdown */ 
} 

.job-info.active { 
    /* second dropdown */ 
}  

.dropdown a.active { 
    /* any active link */ 
} 

Answer 2

Вы не можете устанавливать стили элементов в зависимости от URL.

Самый идеальный способ реализовать то, что вы поставили под сомнение, - это добавить класс к выпадающему меню, используя серверные скрипты, такие как PHP.

Пример кода:

menu.php

<ul class="menu"> 
    <li <?php echo ($page == 'page1') ? 'class="current"' : '';?>> <a href="#">Page1</a> </li> 
    <li <?php echo ($page == 'page2') ? 'class="current"' : '';?>> <a href="#">Page2</a></li> 
</ul> 

и ваша страница PHP, где вы хотите включить в меню:

<?php  
    $page = 'page1'; 
    include('menu.php'); 
?> 

и установить стиль для current класса в CSS.

Answer 3

Попробуйте Это должно сработать.

var url = "http://" + "<?php echo $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>"; 
 
     $('ul.nav a[href="' + url + '"]').parent().addClass('active2'); 
 
     $('.dropdown a').filter(function() { 
 
      return $(this).attr('href') == url 
 
     }).closest('ul').parent().addClass('active2');