如何在页面加载后使li活动

Question

我有一个列表，可在其他网页中重用，因此我将其包含在一个文件中，并在需要时在其他网页中要求相同的列表。

例如，如果我的简历被点击，我的简历的li变成了活动的，而不是仪表板，所以我在同一个文件中实现了jquery，但是每次我单击仪表板以外的其他链接时，活动类只出现在仪表板l中。是因为每次我去其他页面时，活动类都出现在仪表板上，还是由于jquery代码(我包含了jquery的cdn )？

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

我想要的是我的li在我的页面加载后变得活跃，而不是在点击之后。

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

Answer 1

试试这个，将url名称作为所有li的类名，如下所示

<ul> 
<li class="dashboard"><a href="dashboard.php"><i class="ti-dashboard"></i>Dashboard</a></li>
  <li class="resume"><a href="resume.php"><i class="ti-wallet"></i>My Resume</a></li>
  <li class="employer-list"><a href="employer-list.php"><i class="ti-wallet"></i>Browse Jobs</a></li>
  <li class="assess"><a href="assess.php?q=1"><i class="ti-wallet"></i>Assessment</a></li>
  <li class="jobs"><a href="jobs.php"><i class="ti-hand-point-right"></i>Applied Jobs</a></li>
</ul>

然后将您的jQuery更改如下，逻辑是，从url将得到您为每个li指定的类名，并相应地分配活动类。

 $(document).ready(function() {
  var relativePath = location.pathname.split("/");
  var activeMenu = relativePath[relativePath.length-1].replace(".php", "")[0];
    $('li.'+activeMenu).addClass("active");
});