Question

我正在使用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>

以上是菜单的一部分。因此，菜单项（在本例中为仪表板）和子菜单项都必须变为活动状态。

提前致谢！

Answer 1

试试这个。这是从其他引导程序管理模板复制并修改为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>

Answer 2

此解决方案适用于次级菜单。需要JQuery

Key

Answer 3

简单地说：

{
  "kind": "youtube#video",
  "etag": "\"_gJQceDMxJ8gP-8T2HLXUoURK8c/9J_Rsvw1p9XGci8Ne9GRDP6m6NE\"",
  "id": "wWu03qUnHlk",
  "contentDetails": {
    "duration": "PT1H11M51S",
    "dimension": "2d",
    "definition": "hd",
    "caption": "true",
    "licensedContent": true,
    "regionRestriction": {
      "allowed": [
        "US"
      ]
    },
    "projection": "rectangular"
  }
}

Answer 4

因此，您应始终检查以确保该元素存在，以免出现任何错误，并且可以使用jQuery的数据属性选择器轻松定位正确的链接。

var href = window.location.pathname;

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

如果您使用的是绝对网址，则可能需要在var中从.pathname切换为.href

Answer 5

  *****Answer***
     Hi, I'm using this code to add active class depending of the page.
     This is working ok except for multi level submenus any clue how to fix this**
     /** add active class and stay opened when selected */
     var url = window.location;
     // for sidebar menu entirely but not cover treeview
     $('ul.sidebar-menu a').filter(function() {
     return this.href == url;
     }).parent().addClass('active');
     // for treeview
     $('ul.treeview-menu a').filter(function() {
     return this.href == url;
     }).closest('.treeview').addClass('active');

         **HTML**
     <li class="treeview">
        <a href="#">
        <i class="fa fa-gears"></i>
        <span>Settings</span>
        <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="treeview-menu">
           <li>
              <a href="#">
              <i class="fa fa-bars"></i>
              Specials Settings
              </a>
              <ul class="treeview-menu">
                 <li><a href="setting1.php">Setting 1</a></li>
              </ul>
           </li>
        </ul>
     </li>

菜单当前活动页面

5 个答案: