[capitas]

Добрый день. Проблема в следующем.
Есть меню шапки в главном шаблоне, в меню есть несколько кнопок, при переходе на которые открываются другие html страницы. Однако эти страницы все равно экстендят эту шапку с главного щаблона.
вообще я изучаю бэкенд на Python, фронтэнд знаю по стольку по скольку. Есть учебный проект, фронтэнд от нас не требуется но хочется что бы было красиво. Поэтому, я сделал так что бы при наведении курсора на кнопку менялся фон, НО! проблема в том, что этот фон хотелось бы сохранить после нажатия. И что бы он был активен пока не будет нажата другая кнопка меню.
Долго искал в интернете как это сделать. Сделал через jquery, кнопки работали как и задумывалось, до тех пор пока я не подключил через form к ним ссылки.
То есть получается так, что при нажатии на кнопку (с ссылкой) страница перезагружается (обновляется, или переходит на другую) и данные о том что кнопка была нажата - исчезают.
Как решить эту проблему? и да я нуб, так что по возможности поподробнее ответы) Заранее благодарю

<ul class="menu">
<li><form action="/posts/" target="_self">
<button class="btn" type="submit">Все посты</button>
</form></li>

.btn {
  display: inline-block;
  border-radius: 12px;
  border: none;
  padding: 10px 15px;
  color: #000000;
  cursor: pointer;
}

.btn:hover {
  background-color: #D9D9D9;
}

button {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.5;
  font-size: 1rem;
  display: inline-block;
  border-radius: 12px;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  transition: 0.25s;
  background-color: #FFFFFF;
}
button.selected{

  background-color: #D9D9D9;
}

$('button').on('click', function(){
    $('button').removeClass('selected');
    $(this).addClass('selected');
});