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

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

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

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

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

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

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

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

Вот скрипты Я использовал ваш серый для активной (нажатой) и желтый для выбранной - на которую навели)
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);
            }
        });

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

Я вряд ли даже за 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

и т.д.

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