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