javascript — меню активной текущей страницы

Question

javascript — меню активной текущей страницы

Я использую Bootstrap (AdminLTE) и хочу сделать активным пункт меню текущей страницы.
Проблема в том, что я не знаю, как это сделать.
Я имею в виду несколько решений (помимо изменения его в каждом php-файле), например, добавление оператора IF для каждой ссылки, что было бы ужасным решением (я думаю).

      <ul class="sidebar-menu">
<li class="header">HOOFD MENU</li>
<li class='treeview'>
<a href='#'>
<i class='fa fa-dashboard'></i> <span>Dashboard</span>
<span class='pull-right-container'>
<i class='fa fa-angle-left pull-right'></i>
</span>
</a>
<ul class='treeview-menu'>
<li><a href='account.php'><i class='fa fa-circle-o'></i>Account</a></li>
</ul>
</li>
</ul>

Выше часть меню.
Таким образом, пункт меню (в данном случае Dashboard) и пункт подменю должны стать активными.

Заранее спасибо!

0

adminlte javascript jquery php twitter-bootstrap

Решение

Другие решения

Это решение работает с подуровнем меню. Нужен JQuery

<script type="text/javascript">
$(document).ready(function () {
var url = window.location;
var element = $('ul.sidebar-menu a').filter(function () {
return this.href == url || url.href.indexOf(this.href) == 0;
});
$(element).parentsUntil('ul.sidebar-menu', 'li').addClass('active');
});
</script>

3

В одну простую строку:

$("ul.sidebar-menu li a[href='"+document.location.pathname+"']").parents('li').addClass('active');

2

Источник

Accepted Answer

Попробуй это. Это было скопировано из другого шаблона администратора начальной загрузки и изменено для AdminLTE

    <script>
$(document).ready(function() {
var url = window.location;
var element = $('ul.sidebar-menu a').filter(function() {
return this.href == url || url.href.indexOf(this.href) == 0; }).parent().addClass('active');
if (element.is('li')) {
element.addClass('active').parent().parent('li').addClass('active')
}
});
</script>

5