Jquery nav toogle 类活动在链接单击后不起作用

Question

我的导航有问题，它与class="活动的"；或者不活动。当你点击链接时，我写了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

.委托已弃用

而是使用

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

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

添加会话存储处理以保持状态

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