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

我看到过一些类似的问题，但我找不到我需要的解决方案，我正在尝试这样做，当用户在网站中从一个页面移动到另一个页面时，当页面加载时，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>

这是触发时的css

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

您可以使用存储单击的链接，并在加载新页面时获取该链接，以将类设置为上次单击的导航元素

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

。只需在单击链接后再次运行小提琴，查看上次单击的链接是否添加了类

clicked

，您可以使用该类存储已单击的链接，并在加载新页面时获取该链接，以将类设置为上次单击的导航元素

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

。点击一个链接后再次运行小提琴，查看最后一次点击的链接是否被添加到类

clicked

你是说链接的活动状态与当前页面相同吗？你可以简单地使用“onClick”事件本身，它很可能会解决这个问题。@SuhailAkhtar但它会从一个页面切换到另一个页面，它不会工作guess@EmielZuurbier从一个页面到另一个页面没有。你是说链接的活动状态与当前页面相同吗？你可以简单地使用“onClick”事件本身，它很可能会解决这个问题。@SuhailAkhtar但它会从一个页面切换到另一个页面，它不会工作guess@EmielZuurbier从一个页面到另一个页面都没有，所以我应该在每个页面中都放置此代码，因为家庭、爱好、服务在项目文件中都是独立的文件，因为我在其中一个文件中尝试了它，它只是阻止了默认行为，即跳转到page@Deko96是的，此代码必须出现在每一页中。使用上面的版本，而不是使用preventDefault（）调整中的版本，因为这只是为了演示。因此，我应该将此代码放在每个页面中，因为主页、爱好和服务在项目文件中都是单独的文件，因为我在其中一个文件中尝试了它，它只是阻止了默认行为，即跳转到page@Deko96是的，此代码必须出现在每一页中。使用上面的版本，而不是小提琴中的版本进行preventDefault（）调整，因为这只是出于演示目的。