将活动的类添加到菜单

By simon at 2018-02-07 • 0人收藏 • 18人看过

我有一个侧面菜单,我想在加载时显示活动类 页。 显而易见的答案是用jq做到这一点在每个页面查询,但它 重复大量的代码,这是无聊的。 所以我在全局的app.js中使用了这个:

//Active side-menu
$('.nav-item').click(function () {
   $(this).addClass('active');
});
但是这并不是'工作,因为它把积极,当它加载页面这一点 加载html后删除类 我能做什么?
<ul class="nav">
    <li class="nav-item">
        <a class="nav-link" href="general-setup" onclick="gitLabFetch()" id="createEnviromentTab">
            <img src="../resources/img/icons/create-icon.png" alt="" class="menuIcon">
            <span class="menu-title">Create Environment</span>
        </a>
    </li>
    //A lot of li elements
<ul>

2 个回复 | 最后更新于 2018-02-07
2018-02-07   #1

我认为,在页面加载时,你应该得到的网址,尝试找到它在菜单上 与JavaScript,然后将活动类添加到吨他的导航项目,类似的东西 这个:

$(document).ready(function() {
    var url = window.location.pathname + window.location.search;
    $('ul.nav a.nav-link[href="' + url + '"]').parent().addClass('active');    
});
一个小例子,你可能需要调整url部分:
$(document).ready(function() {
    var url = 'general-setup';//window.location.pathname + window.location.search;
    $('ul.nav a.nav-link[href="' + url + '"]').parent().addClass('active');    
});
.active {
  background: red;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li class="nav-item">
      <a class="nav-link" href="general-setup" onclick="gitLabFetch()" id="createEnviromentTab">
          <img src="../resources/img/icons/create-icon.png" alt="" class="menuIcon">
          <span class="menu-title">Create Environment</span>
      </a>
  </li>
  <li class="nav-item">
      <a class="nav-link" href="general-setup2" onclick="gitLabFetch()" id="createEnviromentTab">
          <img src="../resources/img/icons/create-icon.png" alt="" class="menuIcon">
          <span class="menu-title">Create Environment</span>
      </a>
  </li>
 //A lot of li elements
<ul>

2018-02-07   #2

好的,所以经过深思熟虑,我想出了一个解决方案。一个方法我 会采取的是添加一个data属性锚或上,这给你 自由定义您的列表项链接到和风格的路线 因此根据路线...

(() => {
  $('li')
  .filter((i, li) => $(li).data('route') === window.location.pathname)
  .addClass('active')
})()
<li data-route="/">HOME</li>
<li data-route="/friends">Friends</li>
<li data-route="/profile">Profile</li>
<li data-route="/blog">Blog</li>
正如你所看到的,我运行所有的列表项目,并过滤掉所有的项目 那没有data-route个属性与之后的window.location.pathname相匹配 我留下了过滤列表,我申请一个活跃的类到匹配 项目。

登录后方可回帖

Loading...