试图让一个链接在html中被点击时看起来不同。

Question

好吧，我已经看到了一些类似的问题，但我无法找到我需要的解决方案，我试图使它，当用户从一个页面移动到另一个在网站上，当页面加载时，标签应该改变颜色，并保持这种方式，我已经尝试使用这个代码，但它没有工作在所有这里是代码的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 来存储被点击的链接，并在新页面加载时获取它，为最后点击的导航元素设置一个类。

 $(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上的堆栈片段无法使用，这里有一个 小提琴 调整为使用 preventDefault() 在点击链接时。只要在点击链接后再次运行Fiddle，就可以看到最后点击的链接被添加的类 clicked.