在 html 中单击页面时尝试使链接看起来不同

Question

well i have seen some similar questions but i couldn't find the solution i needed i am trying to make it so that when the user moves from one page to another in the website when the page is loaded the a tag should change color and stay that way i have tried using this code but it didnt work at all here is the html of the code

 <div id="button-group" style="width:100%">
        <a href="#surprise"><img src="felix.png" id="cat" ></a>
        <a href="C:\xampp\htdocs\project\home.html" style="width:10%" class="button">home</a>
        <a href="C:\xampp\htdocs\project\Hobbies.html" id="hobbies" style="width:10%" class="button">Hobbies</a>
        <a href="#contact_us " style="width:10%" class="button">Contact</a>
        <a href="C:\xampp\htdocs\project\Services.html" style="width:10%" class="button">Services</a>
    </div>

so for example if i am on the Hobbies page and click the home page the home page should turn the color to blue or if i am on hobbies and its clicked it should also change color onload here is the jquery that i tried

$(document).ready(function(){
    $("#hobbies").trigger('.click');
});

and here is the css when triggered

.a :click {
  background-color:rgba(0, 183, 255, 0.788);
  }

Answer 1

You can use sessionStorage to store the link that was clicked and get it when the new page is loaded to set a class to the last clicked navigation element.

 $(document).ready(function() {
    let clicked = $.trim(sessionStorage.getItem("clicked"));
    if (clicked) {
       $("#button-group a").each(function() {
          if ($.trim($(this).attr("href")) == clicked) {
             $(this).addClass("clicked");
          };
       });
    }
    $("#button-group a").on("click", function() {
       $("#button-group a").each(function() {
          $(this).removeClass("clicked");
       });
       let link = $(this).attr("href");
       $(this).addClass("clicked");
       sessionStorage.setItem("clicked", link);
    });
 });

As a stack snippet for this doesn't work on Stackoverflow, here's a Fiddle with the adjustment to use preventDefault() on click of a link. Just run the Fiddle again after clicking on a link to see that the last clicked link gets added the class clicked .