jquery - 单击链接后，Jquery nav Toogle 类活动不起作用

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

标签： jquerynavigation

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>