提问者:小点点

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


我有一个列表,这是在其他网页重用,所以我包括在一个文件,并要求在其他网页相同的要求

我想使它们处于活动状态,例如,如果单击了myresume,myresume的li将变为活动状态,而不是dashboard,因此我在同一个文件中实现jquery,但每次单击dashboard以外的其他链接时,活动类只出现在dashboard l中。 是因为每次我去其他页面时,活动类都出现在仪表板上,还是因为jquery代码(我包含了jquery的cdn)?

null

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

null


共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>