当列表的代码在其他文件中可重用时，如何使 li 处于活动状态

Question

>我有一个在其他网页中重复使用的列表，所以我将其包含在一个文件中，并在需要时在其他网页中要求相同

我想使它们处于活动状态，例如，如果单击我的简历，则 myresume 的 li 变为活动状态而不是仪表板，所以我在同一文件中实现 jquery 但是每次我单击仪表板以外的其他链接时，活动类仅存在于仪表板 l 中。是因为每次我转到其他页面时，仪表板上都存在活动类还是由于 jquery 代码(我已经包含了 jquery 的 cdn(？？

$(document).ready(function() {
$("li").click(function() {
// remove classes from all
$("li").removeClass("active");
// add class to the one we clicked
$(this).addClass("active");
});
});

.active {
background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="active"><a href="dashboard.php"><i class="ti-dashboard"></i>Dashboard</a></li>
<li><a href="resume.php"><i class="ti-wallet"></i>My Resume</a></li>
<li><a href="employer-list.php"><i class="ti-wallet"></i>Browse Jobs</a></li>
<li><a href="assess.php?q=1"><i class="ti-wallet"></i>Assessment</a></li>
<li><a href="jobs.php"><i class="ti-hand-point-right"></i>Applied Jobs</a></li>
</ul>

Answer 1

如果你想让活动保持，你可以使用sessionStorage，但为什么不直接ajax页面

https://plungjan.name/SO/ajaxnav/index.html

$(document).ready(function() {
$("#nav a").on("click", function(e) {
e.preventDefault();
// remove classes from all
$("#nav li").removeClass("active");
// add class to the one we clicked
$(this).closest("li").addClass("active");
$("#content").load(this.href);
}).eq(0).click();
});

.active {
background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="nav">
<li class="active"><a href="dashboard.php"><i class="ti-dashboard"></i>Dashboard</a></li>
<li><a href="resume.php"><i class="ti-wallet"></i>My Resume</a></li>
<li><a href="employer-list.php"><i class="ti-wallet"></i>Browse Jobs</a></li>
<li><a href="assess.php?q=1"><i class="ti-wallet"></i>Assessment</a></li>
<li><a href="jobs.php"><i class="ti-hand-point-right"></i>Applied Jobs</a></li>
</ul>
<div id="content"></div>