как сохранить состояние нажатой кнопки

[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');
});

[voraa]

проблема в том, что этот фон хотелось бы сохранить после нажатия. И что бы он был активен пока не будет нажата другая кнопка меню.

Зачем это? Получится ситуация, что после перезагрузки страницы одна кнопка (на которую нажимали раньше) будет подсвечена, и подсветится другая, на которую пользователь наведет. Т.е надо думать, как снимать подсветку с предыдущей кнопки при наведении на другую.

[capitas]

Не. Кнопка должна быть подсвечена до тех пор пока не будет нажата другая. То есть пока мы находимся на выбранной странице.
сейчас скрин приложу
https://ibb.co/K2vJrZv
То есть смысл в том, что когда нажата кнопка Все посты - независимо от того что бы я там еще делал на сайте - она осталась "активной", то есть подсвеченной. в рамкой одной страницы это легко сделать. но дело в том что каждая кнопка оснащена ссылкой, поэтому при нажатии на любую из них страница обновляется и состояние кнопки меняется на дефолтное тут же. и кажется будто код не работает. но код работает, если убрать ссылки и пожамкать на кнопки то все будет как я задумал.

[voraa]

Не. Кнопка должна быть подсвечена до тех пор пока не будет нажата другая.

Т.е подсвечены могут быть две кнопки? Та на которую нажимали, и та на которую навели (но еще не нажата). У вас ведь и при наведении кнопки подсвечиваются.
Может делать разные подсветки. Одна для кнопки, которую нажимали, другая для кнопки на которую наводят?

[capitas]

Т.е подсвечены могут быть две кнопки? Та на которую нажимали, и та на которую навели (но еще не нажата). У вас ведь и при наведении кнопки подсвечиваются.
Может делать разные подсветки. Одна для кнопки, которую нажимали, другая для кнопки на которую наводят?

ну получается да, в какой-короткий момент будут подсвечены две кнопки, одна "активная", та которая отвечает за текущую страницу, и какая-то любая при наведении курсором.
а по поводу разных цветов я вот не думал. Я во фронтэнде новичок, возможно это моветон - использовать один фон и для активной кнопки и для пока еще не активной - я не знаю, поправьте меня. Ну я вот сейчас так поводил мышкой по кнопкам и представил какого это будет пользователю.. в принципе для hover'а можно сделать серый более блёклый, или для активной кнопки более темный. Ну в любом случае сейчас это не первостепенная проблема)

[voraa]

Вот скрипты Я использовал ваш серый для активной (нажатой) и желтый для выбранной - на которую навели)
CSS

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



        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;
        }
/* выбранная кнопка - на котоую навели */
        :is(.btn, .btn.active):hover {
            background-color: yellow; 
        }
/* активная кнопка - которая была нажата */
        .btn.active {
            background-color: #d9d9d9;
        }

HTML. Для каждой кнопки надо задать свой уникальный id и они должны быть одинаковые на всех страницах. Типа такого

<ul class="menu">
        <li>
            <form action="/posts/" target="_self">
                <button id="b1" class="btn" type="submit">Все посты</button>
            </form>
        </li>
        <li>
            <form action="/another/" target="_self">
                <button id="b2" class="btn" type="submit">Другой пункт</button>
            </form>
        </li>
        <li>
            <form action="/something_else/" target="_self">
                <button id="b3" class="btn" type="submit">Еще что то</button>
            </form>
        </li>
    </ul>

На каждую страницу скрипт (прямо на страницу, или через файл подключать)

document.addEventListener('DOMContentLoaded', () => {
            const buttons = document.querySelectorAll('.btn');
            const activebutid = window.sessionStorage.getItem('activebutton');

            let lastactive = activebutid
                ? document.getElementById(activebutid)
                : null;

            lastactive?.classList.add('active');

            function clickhandler() {
                lastactive?.classList.remove('active');
                this.classList.add('active');
                window.sessionStorage.setItem('activebutton', this.id);
            }

            for (const but of buttons) {
                but.addEventListener('click', clickhandler);
            }
        });

[capitas]

ДА! Отлично боже все работает как надо, как гора с плеч. Огромное спасибо!
а можете в качестве бонуса еще построчно расписать что именно вы делаете в JS. Я не поклонник тупо копипастить, хочу разобраться на будущее

[voraa]

Я вряд ли даже за 5 постов объясню вам js и то как работает DOM
Учите. Что непонятно гуглите
Например
https://www.google.com/search?q=mdn+...t=gws-wiz-serp

https://www.google.com/search?q=mdn+...t=gws-wiz-serp

https://www.google.com/search?q=mdn+...t=gws-wiz-serp

и т.д.

[capitas]

Понял) Большое спасибо за помощь!