javascript - How to make li active when the code of the list is reusable in other file

Question

I am having a list which is reused in other webpage so i included it in one file and require the same in other webpage where required

I want to make them active for example if MY RESUME IS CLICKED THE li of myresume become active instead of dashboard so i implement jquery in the same file but everytime i click on other link other than dashboard the active class is only present in Dashboard l . Is it due to because every time I am going to other page the active class is present on dashboard or due to jquery code(i have included cdn of jquery)??

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

If you want the active to stay, you COULD use sessionStorage, but why not just ajax the page

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>