Блог

Я разрабатываю веб-сайт с использованием 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 active таким образом, чтобы при нажатии кнопки (ссылки) менялся цвет фона и color, чтобы пользователь знал, в каком разделе моего сайта в данный момент находится.

 .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;
}
  

Через инспектор я вижу, что активный класс установлен правильно, но когда я нажимаю на одну из кнопок, я вижу, что активный класс появляется всего на одну секунду, а затем, когда загружается новая страница, кнопка не сохраняет свой активный класс.
Я осознаю тот факт, что в стеке полно вопросов, похожих на мои, и что мне, вероятно, следует использовать jQuery / JavaScript, но ни одно из решений, которые я пробовал до сих пор, не сработало для меня.

Не могли бы вы, пожалуйста, помочь мне решить проблему?

Большое вам спасибо!

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