javascript - 将事件类添加到菜单

Question

我有一个侧面菜单，我想在加载页面时显示事件类。

显而易见的答案是在每个页面中使用 jquery 来执行此操作，但它会重复大量代码并且很无聊。

所以我在全局的 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>

Answer 1

我认为在页面加载时，您应该获取 url，尝试使用 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>