Закрашивание кнопки при нажатии

@_Chaffee · Регистрация: 18.10.2014

Студворк — интернет-сервис помощи студентам

Всем здасьте, я в js полный прафан. При нажатии на

HTML5
1
<a asp-route-razdel="First" asp-route-view="@ViewBag.View" asp-route-Date="@DateTime.Now.ToString("d")" style="color:black"> <input type="submit" id="btn1" value="За день"  class="button-style" /></a>

мне надо чтоб кнопка закрасилась вот css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.button-style {
    padding: 2px 9px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    border-radius: 10px;
    background-color: white;
    color: black;
    border: 2px solid #303030;
    margin: auto;
    vertical-align: central;
}
    .button-style:hover{
        background-color: #303030;
        color: white;
    }
    .button-style:focus{
        outline:none !important;
    }
  .act {
        background-color: #303030;
        border: 2px solid #303030;
        color: white;
    }

я уже нашел несколько примеров типа этого

JavaScript
1
2
3
4
 function () {
    $('.button-style').click(function () {
        $('.button-style').addClass('act');
    });

, но когда страница обновляется то кнопка не закрашена. Как это исправить??? помогите плз.

@kalabuni · 27.07.2018, 18:38

обновление страницы уничтожает текущий документ (а вместе с ним уничтожаются и все динамические изменения в нём) и создаёт новый документ
поэтому состояние кнопки (её фон) вам надо сохранить (либо в куках, либо в хранилище) и при загрузке страницы прочитать это состояние и установить его

могу набросать код на нативном js, он не сложный, но вы, похоже, предпочитаете jquery... попросите модераторов перенести тему в соответствующий раздел... там вам помогут быстрее

@_Chaffee · 27.07.2018, 18:53 **[ТС]**

kalabuni, Ок, спасибо

@sad67man · 28.07.2018, 00:03

_Chaffee, По идее нужно использовать cookie и при загрузке страницы закрашивать кнопку на стороне сервера.

Добавлено через 2 минуты
Либо можно использовать localStorage. Все зависит собственно от того, за что эта кнопка отвечает, я думаю не только же за цвет кнопки)

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

@_Chaffee · 28.07.2018, 00:13 **[ТС]**

sad67man, по нажатию этой кнопки в адресной строке должно появиться 3 параметра и все

Добавлено через 49 секунд
я читал про localStorage но так и не понял как его использовать

@sad67man · 28.07.2018, 00:43

_Chaffee, Ну конечно, имеется в виду конечная цель назначения кнопки. Что значит в адресной строке должны появиться параметры? Эти параметры нужны для отправки на сервер ведь так? Т.е. при нажатии на кнопку у вас страница будет перегружаться? я что-то не пойму. В таком случае можно сделать форму, после ее отправки на стороне сервера уже через суперглобальный массив $_GET добавлять класс кнопке.

@_Chaffee · 28.07.2018, 00:52 **[ТС]**

sad67man, я использую .net core, после нажатия на кнопку получается такая адресная строка "http://localhost:6452/?razdel=First&Date=28.07.2018" и потом с ней я уже работаю в контролере.

@sad67man · 28.07.2018, 00:56

_Chaffee, Ну вот и используйте эти данные для добавления класса на стороне сервера.

@_Chaffee · 28.07.2018, 00:58 **[ТС]**

Мне казалось что это можно сделать в js и не затрагивать сервер.

@sad67man · 28.07.2018, 01:04

_Chaffee, Я так понимаю, что кнопка будет закрашена в случае наличии этих параметров в адресной строке, если их нет, то кнопка не будет закрашена. Очевидно, что данные параметры и являются отправной точкой для закраски кнопки. В данном случае использовать куки, либо localstorage бессмысленно, конечно можно и на стороне клиента парсить адресную строку и строить логику закрашивания кнопки, но зачем, когда это проще сделать на стороне сервера, и выглядеть это будет лучше, когда страница будет загружаться уже с закрашенной кнопкой. Чем когда она будет закрашиваться по пути)

@_Chaffee · 28.07.2018, 01:09 **[ТС]**

sad67man, А звучит неплохо, попробую сделать. Спасибо

Новые блоги и статьи Все статьи Все блоги /
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Рецензия / Мнение/ Перевод https:/ / **********/ gallery/ thinkpad-x220-tablet-porn-gzoEAjs . . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	27.07.2018, 18:38
	обновление страницы уничтожает текущий документ (а вместе с ним уничтожаются и все динамические изменения в нём) и создаёт новый документ поэтому состояние кнопки (её фон) вам надо сохранить (либо в куках, либо в хранилище) и при загрузке страницы прочитать это состояние и установить его могу набросать код на нативном js, он не сложный, но вы, похоже, предпочитаете jquery... попросите модераторов перенести тему в соответствующий раздел... там вам помогут быстрее 0

@_Chaffee 3 / 7 / 5 Регистрация: 18.10.2014 Сообщений: 177
	27.07.2018, 18:53 [ТС]
	kalabuni, Ок, спасибо 0

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,813
	28.07.2018, 00:03
	_Chaffee, По идее нужно использовать cookie и при загрузке страницы закрашивать кнопку на стороне сервера. Добавлено через 2 минуты Либо можно использовать localStorage. Все зависит собственно от того, за что эта кнопка отвечает, я думаю не только же за цвет кнопки) Отличие localStorage от Cookie заключается в том, что Cookie гоняется в заголовках при каждом запросе в обе стороны клиента и сервера и они доступны и там и там, а localStorage (локальное хранилище) хранится только на клиенте. 0

@_Chaffee 3 / 7 / 5 Регистрация: 18.10.2014 Сообщений: 177
	28.07.2018, 00:13 [ТС]
	sad67man, по нажатию этой кнопки в адресной строке должно появиться 3 параметра и все Добавлено через 49 секунд я читал про localStorage но так и не понял как его использовать 0

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,813
	28.07.2018, 00:43
	_Chaffee, Ну конечно, имеется в виду конечная цель назначения кнопки. Что значит в адресной строке должны появиться параметры? Эти параметры нужны для отправки на сервер ведь так? Т.е. при нажатии на кнопку у вас страница будет перегружаться? я что-то не пойму. В таком случае можно сделать форму, после ее отправки на стороне сервера уже через суперглобальный массив $_GET добавлять класс кнопке. 0

@_Chaffee 3 / 7 / 5 Регистрация: 18.10.2014 Сообщений: 177
	28.07.2018, 00:52 [ТС]
	sad67man, я использую .net core, после нажатия на кнопку получается такая адресная строка "http://localhost:6452/?razdel=First&Date=28.07.2018" и потом с ней я уже работаю в контролере. 0

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,813
	28.07.2018, 00:56
	_Chaffee, Ну вот и используйте эти данные для добавления класса на стороне сервера. 0

@_Chaffee 3 / 7 / 5 Регистрация: 18.10.2014 Сообщений: 177
	28.07.2018, 00:58 [ТС]
	Мне казалось что это можно сделать в js и не затрагивать сервер. 0

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,813
	28.07.2018, 01:04
	_Chaffee, Я так понимаю, что кнопка будет закрашена в случае наличии этих параметров в адресной строке, если их нет, то кнопка не будет закрашена. Очевидно, что данные параметры и являются отправной точкой для закраски кнопки. В данном случае использовать куки, либо localstorage бессмысленно, конечно можно и на стороне клиента парсить адресную строку и строить логику закрашивания кнопки, но зачем, когда это проще сделать на стороне сервера, и выглядеть это будет лучше, когда страница будет загружаться уже с закрашенной кнопкой. Чем когда она будет закрашиваться по пути) 0

@_Chaffee 3 / 7 / 5 Регистрация: 18.10.2014 Сообщений: 177
	28.07.2018, 01:09 [ТС]
	sad67man, А звучит неплохо, попробую сделать. Спасибо 0