Jquery 导航切换 class 活动在 link 时钟后不起作用

Question

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

导航代码

$(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>

Jquery 导航切换 class 活动在 link 时钟后不起作用

Jquery nav toogle class active doesn't work after link click

navigation

jquery