Показать сообщение отдельно
  #6 (permalink)  
Старый 15.01.2024, 17:05
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,743

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