单击后将侧边栏活动菜单项设置为 class="active"？

Question

我最近在此处发布了一篇帖子，并在解决第一个问题后将其关闭，但我仍然无法修复此问题。

我有一个带有“客户”、“项目”等链接的侧边栏。它们链接到相应的页面。但是，我希望能够为我单击的任何菜单项进行设置，无论是项目还是客户。

这是侧边栏 HTML（ruby on rails）：

  <div id="sidebar" class="sidebar-offcanvas">
      <div class="col-md-12">
        <h3></h3>
        <ul class="nav nav-pills nav-stacked">
            <li><%= link_to 'Customer Management', customers_path %></li>
            <li><%= link_to 'Project Management', projects_path %></li>
        </ul>
      </div>
  </div>

这是该 HTML 下的 javascript：

<script type='text/javascript'>
    $(document).ready(function() {
      $('#sidebar .nav-pills a').click(function() {
        $('#sidebar .nav-pills li.active').removeClass('active');
        $(this).parent().addClass('active');
      });
    });
</script>

当我点击“客户”页面时，什么也没有发生。但是，如果我将第一个 <li> 设置为活动类，那么我可以看到应用到它的 class="active" css 样式。

这是它背后的 CSS：

body,html,.row-offcanvas {
  height:100%;
}

body {
  padding-top: 50px;
}

#sidebar {
  width: inherit;
  min-width: 220px;
  max-width: 220px;
  background-color:#E6E5E5;
  float: left;
  height:100%;
  position:relative;
  overflow-y:auto;
  overflow-x:hidden;
}
#main {
  height:100%;
  overflow:auto;
}


/*
 * off Canvas sidebar
 * --------------------------------------------------
 */
@media screen and (max-width: 768px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    width:calc(100% + 220px);
  }

  .row-offcanvas-left
  {
    left: -220px;
  }

  .row-offcanvas-left.active {
    left: 0;
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
  }
}

#sidebar a:hover {
    background-color:#6699FF;
}

任何帮助将不胜感激。我已经为此奋斗了一个多小时。

Answer 1

下面是一些 JavaScript，我用它来为导航中与当前 URL 匹配的项目添加一个类：

// Get current page and set current in nav
$(".nav>li").each(function() {
    var navItem = $(this);
    if (navItem.find("a").attr("href") == location.pathname) {
      navItem.addClass("active");
    }
});

该代码应该在您的页面中几乎一字不差地工作。基本上它只是循环遍历nav 中的所有li 项，如果它找到一个具有指向当前页面的超链接的项，它会将active 类应用于列表项。