单击链接后，Jquery nav 切换类活动无效

Question

我有问题，我的导航有 class="active" 或 inactive 的链接我写了 jquery 脚本，当你点击链接最后一个活动变为不活动并且点击变为活动时问题是当我点击脚本只工作半秒和页面刷新和链接丢失以前的类。登录后第一个链接应该始终处于活动状态，因为登录首先会重定向到他

导航代码

$(document).ready(function() {
  $(function() {
    var sidebar = $("#sidebar");
    sidebar.delegate("a.inactive", "click", function(event) {
      event.preventDefault();
      sidebar.find(".active").toggleClass("active inactive");
      $(this).toggleClass("active inactive");
    });
  });
});

.active { background-color: yellow; }
.inactive { background-color: grey; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar" class="nav-wrapper">
  <ul class="nav flex-column">
    <li class="nav-item">
      <a class="nav-link active" href="{{ route('home') }}">
        <i class="material-icons">edit</i>
        <span>Darbuotojai</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link inactive" href="{{ url('/naujas') }}">
        <i class="material-icons">vertical_split</i>
        <span>Naujas darbuotojas</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link inactive" href="{{ url('/imones') }}">
        <i class="material-icons">note_add</i>
        <span>Įmonės</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link inactive" href="{{ url('/padaliniai') }}">
        <i class="material-icons">note_add</i>
        <span>Padaliniai</span>
      </a>
    </li>
  </ul>
</div>

好吧，我希望找到 jquery 解决方案，因为我在 Blade 中只找到了 laravel 解决方案，如下所示：

@if (\Request::is('home'))  
      <li class="nav-item">
        <a class="nav-link active" href="{{ route('home') }}">
          <i class="material-icons">edit</i>
          <span>Darbuotojai</span>
        </a>
      </li>
      @else
      <li class="nav-item">
        <a class="nav-link inactive" href="{{ route('home') }}">
          <i class="material-icons">edit</i>
          <span>Darbuotojai</span>
        </a>
      </li>
@endif

Answer 1

.delegate 已弃用

改为使用

sidebar.on("click","a.inactive", function (event) { 

同时删除 $(document).ready(function() { }) - 不需要

添加sessionStorage处理以保持状态

$(function() {
  const $sidebar = $("#sidebar");
  $sidebar.on("click", "a.inactive", function(event) {
    event.preventDefault(); // this statement will make the link NOT work
    $sidebar.find(".active").toggleClass("active inactive");
    $(this).toggleClass("active inactive");
  });
  $sidebar.on("click", "a.active", function(event) {
    // sessionStorage.setItem("active",$(this).index()); // does not work in a snippet  - uncomment on your page
  })
  const idx = 2; // sessionStorage.getItem("active") || 0; // uncomment and remove "2"
  $sidebar.find(".active").toggleClass("active inactive");
  $sidebar.find(".nav-link").eq(idx).toggleClass("active inactive");
});

.active {
  background-color: yellow;
}

.inactive {
  background-color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar" class="nav-wrapper">
  <ul class="nav flex-column">
    <li class="nav-item">
      <a class="nav-link active" href="{{ route('home') }}">
        <i class="material-icons">edit</i>
        <span>Darbuotojai</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link inactive" href="{{ url('/naujas') }}">
        <i class="material-icons">vertical_split</i>
        <span>Naujas darbuotojas</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link inactive" href="{{ url('/imones') }}">
        <i class="material-icons">note_add</i>
        <span>Įmonės</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link inactive" href="{{ url('/padaliniai') }}">
        <i class="material-icons">note_add</i>
        <span>Padaliniai</span>
      </a>
    </li>
  </ul>
</div>