[英]How to make li active when the code of the list is reusable in other file
我有一个在其他网页中重复使用的列表,所以我将它包含在一个文件中,并在需要的其他网页中要求相同
我想让它们处于活动状态,例如,如果我的简历被点击,myresume 的 li 变为活动状态而不是仪表板,所以我在同一个文件中实现 jquery 但每次我点击仪表板以外的其他链接时,活动的 class 仅存在于仪表板 l 中。 是因为每次我去其他页面时,仪表板上都会出现活动的 class 还是由于 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>
如果你想让活动留下来,你可以使用 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.