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

Question

好吧，我已经看到了一些类似的问题，但我找不到我需要的解决方案，我正在努力做到这一点，以便当用户在加载页面时从网站中的一个页面移动到另一个页面时，a 标签应该改变颜色并保持不变这样我就尝试过使用此代码，但它根本不起作用是代码的 html

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

因此，例如，如果我在爱好页面上并单击主页，则主页应该将颜色变为蓝色，或者如果我在爱好上并且单击它也应该改变颜色 onload 这里是我试过的 jquery

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

这是触发时的 css

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

Answer 1

您可以使用sessionStorage存储单击的链接，并在加载新页面时获取它，以将 class 设置为最后单击的导航元素。

 $(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);
    });
 });

由于此堆栈片段在 Stackoverflow 上不起作用，这里有一个Fiddle调整以在单击链接时使用preventDefault() 。 单击链接后再次运行 Fiddle 以查看最后单击的链接已添加 class clicked 。