Меню активно на текущей странице

Я использую 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) и пункт подменю должны стать активными.

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


javascript php jquery twitter-bootstrap adminlte
person JeroenM    schedule 10.03.2017    source источник

Ответы (4)


arrow_upward
5
arrow_downward

Попробуй это. Это было скопировано из другого шаблона администратора начальной загрузки и изменено для 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>
person A B Catella    schedule 10.03.2017
comment
Где его нужно разместить? Может ли это быть просто включенным файлом php? - person JeroenM; 10.03.2017
comment
Я попытался включить его и поместил в шаблон (который содержит меню и т. д.) внизу тега body. Я также поместил код в тег скрипта. Вроде как-то не работает. - person JeroenM; 10.03.2017
comment
Работает как шарм! Большое спасибо! - person JeroenM; 10.03.2017

arrow_upward
4
arrow_downward

Это решение работает с меню подуровня. Нужен 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>
person Yannick MOLINET    schedule 12.05.2017

arrow_upward
2
arrow_downward

В одной простой строке:

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

arrow_upward
0
arrow_downward

Таким образом, вы всегда должны проверять, чтобы убедиться, что элемент существует, чтобы не получить никаких ошибок, и вы можете использовать селектор атрибутов данных jQuery, чтобы легко нацеливаться на правильные ссылки.

var href = window.location.pathname;

if( $(".sidebar-menu a[href='"+href+"']").length ) {
    $(".sidebar-menu a[href='"+href+"']").parent('li').addClass('active');
}

Если вы используете абсолютные URL-адреса, вам может потребоваться переключиться с .pathname на .href в var

person Brockenstein    schedule 01.05.2019