如何在加载新页面时保持链接的活动状态

Question

我正在使用 Bootstrap 开发一个网站。 我有一个包含三个按钮的部分，每个按钮都指向我网站的不同页面。

<div class="container-fluid filter-tag py-3">

    <ul class="tag-menu">
        <li><a href="<?php echo esc_attr( add_query_arg( 'tag', 'biella' ) ); ?>" class="btn"> Biella </a></li>
        <li><a href="<?php echo esc_attr( add_query_arg( 'tag', 'vercelli' ) ); ?>" class="btn"> Vercelli </a></li>
        <li><a href="<?php echo esc_attr( add_query_arg( 'tag', 'valsesia' ) ); ?>" class="btn"> Valsesia </a></li>
    </ul>
    

</div>

我已经设置了 css 活动类，以便在单击按钮（链接）时背景颜色和颜色会发生变化，以便让用户知道我网站的哪个部分当前处于打开状态。

.tag-menu li a{
    border:1px solid $primary;
    border-radius:12px;
    padding:5px;
    margin-right:7px;
    color:#000000;
}
.tag-menu li a:active{
    border:1px solid $primary;
    background-color:$primary;
    border-radius:12px;
    padding:5px;
    margin-right:7px;
    color:#ffffff;
    box-shadow:none;
}

我可以通过检查器看到活动类设置正确，但是当我单击其中一个按钮时，我看到活动类只出现一秒钟，然后在加载新页面时，按钮没有't 保持其活跃的类。 我知道 Stack 充满了与我类似的问题，我可能应该使用 JQuery/JavaScript，但到目前为止我尝试过的解决方案都没有对我有用。

你能帮我解决问题吗？

非常感谢！

Answer 1

:active不是一个类，而是一个捕捉点击时刻（点击和释放之间）的选择器，所以你的 CSS 只在那个瞬间添加。 这里有一个小例子：

 a:active{ color:red; }

 <a>link example</a>

为了实现您想要做的事情，您应该使用事件侦听器在单击链接时添加类：

 var links = document.querySelectorAll(".link"); for(link of links){ link.addEventListener("click", function(e){ for(inlink of links){ inlink.classList.remove("active"); } e.target.classList.add("active"); }); }

 .active { color:red; }

 <a class="link">link 1</a><br> <a class="link">link 2</a>