Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.01.2024, 15:12
Новичок на форуме
Отправить личное сообщение для capitas Посмотреть профиль Найти все сообщения от capitas
 
Регистрация: 15.01.2024
Сообщений: 5

как сохранить состояние нажатой кнопки
Добрый день. Проблема в следующем.
Есть меню шапки в главном шаблоне, в меню есть несколько кнопок, при переходе на которые открываются другие 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');
});
Ответить с цитированием
  #2 (permalink)  
Старый 15.01.2024, 15:45
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,717

Сообщение от capitas
проблема в том, что этот фон хотелось бы сохранить после нажатия. И что бы он был активен пока не будет нажата другая кнопка меню.
Зачем это? Получится ситуация, что после перезагрузки страницы одна кнопка (на которую нажимали раньше) будет подсвечена, и подсветится другая, на которую пользователь наведет. Т.е надо думать, как снимать подсветку с предыдущей кнопки при наведении на другую.
Ответить с цитированием
  #3 (permalink)  
Старый 15.01.2024, 15:59
Новичок на форуме
Отправить личное сообщение для capitas Посмотреть профиль Найти все сообщения от capitas
 
Регистрация: 15.01.2024
Сообщений: 5

Не. Кнопка должна быть подсвечена до тех пор пока не будет нажата другая. То есть пока мы находимся на выбранной странице.
сейчас скрин приложу
https://ibb.co/K2vJrZv
То есть смысл в том, что когда нажата кнопка Все посты - независимо от того что бы я там еще делал на сайте - она осталась "активной", то есть подсвеченной. в рамкой одной страницы это легко сделать. но дело в том что каждая кнопка оснащена ссылкой, поэтому при нажатии на любую из них страница обновляется и состояние кнопки меняется на дефолтное тут же. и кажется будто код не работает. но код работает, если убрать ссылки и пожамкать на кнопки то все будет как я задумал.
Ответить с цитированием
  #4 (permalink)  
Старый 15.01.2024, 16:44
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,717

Сообщение от capitas
Не. Кнопка должна быть подсвечена до тех пор пока не будет нажата другая.
Т.е подсвечены могут быть две кнопки? Та на которую нажимали, и та на которую навели (но еще не нажата). У вас ведь и при наведении кнопки подсвечиваются.
Может делать разные подсветки. Одна для кнопки, которую нажимали, другая для кнопки на которую наводят?
Ответить с цитированием
  #5 (permalink)  
Старый 15.01.2024, 16:52
Новичок на форуме
Отправить личное сообщение для capitas Посмотреть профиль Найти все сообщения от capitas
 
Регистрация: 15.01.2024
Сообщений: 5

Сообщение от voraa Посмотреть сообщение
Т.е подсвечены могут быть две кнопки? Та на которую нажимали, и та на которую навели (но еще не нажата). У вас ведь и при наведении кнопки подсвечиваются.
Может делать разные подсветки. Одна для кнопки, которую нажимали, другая для кнопки на которую наводят?
ну получается да, в какой-короткий момент будут подсвечены две кнопки, одна "активная", та которая отвечает за текущую страницу, и какая-то любая при наведении курсором.
а по поводу разных цветов я вот не думал. Я во фронтэнде новичок, возможно это моветон - использовать один фон и для активной кнопки и для пока еще не активной - я не знаю, поправьте меня. Ну я вот сейчас так поводил мышкой по кнопкам и представил какого это будет пользователю.. в принципе для hover'а можно сделать серый более блёклый, или для активной кнопки более темный. Ну в любом случае сейчас это не первостепенная проблема)
Ответить с цитированием
  #6 (permalink)  
Старый 15.01.2024, 17:05
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,717

Вот скрипты Я использовал ваш серый для активной (нажатой) и желтый для выбранной - на которую навели)
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);
            }
        });
Ответить с цитированием
  #7 (permalink)  
Старый 15.01.2024, 17:15
Новичок на форуме
Отправить личное сообщение для capitas Посмотреть профиль Найти все сообщения от capitas
 
Регистрация: 15.01.2024
Сообщений: 5

ДА! Отлично боже все работает как надо, как гора с плеч. Огромное спасибо!
а можете в качестве бонуса еще построчно расписать что именно вы делаете в JS. Я не поклонник тупо копипастить, хочу разобраться на будущее
Ответить с цитированием
  #8 (permalink)  
Старый 15.01.2024, 17:31
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,717

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

и т.д.
Ответить с цитированием
  #9 (permalink)  
Старый 15.01.2024, 18:05
Новичок на форуме
Отправить личное сообщение для capitas Посмотреть профиль Найти все сообщения от capitas
 
Регистрация: 15.01.2024
Сообщений: 5

Понял) Большое спасибо за помощь!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сохранить фотку из WebCam на сервере. potkin ExtJS 3 13.10.2016 10:03
Возврат в исходное состояние кнопки solobutova@mail.ru Элементы интерфейса 13 13.04.2016 18:14
Как сохранить данные в cookie AJAX Diamond07 AJAX и COMET 3 07.12.2015 01:04
Показ следующего числа в зависимости от нажатой кнопки TTATPuOT jQuery 1 09.10.2015 18:56
Где и как сохранить выбранный пользователем размер шрифта ivi_ivi_ivi Элементы интерфейса 6 05.06.2015 08:28