Сохранить текущее состояние при перезагрузки страницы

@antidemon92 · Регистрация: 29.11.2013

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

Всем доброго времени суток. Есть html код сортировки.

HTML5
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
26
27
28
29
30
                <div class="category_settings_panel">
                    <div class="category_settings_tovari">
                        <span>Товары</span>
                        <ul class="tovari_menu">
                            <li><a class="click_settings" href="#">Все</a></li>
                            <li><a href="#">В наличии</a></li>
                            <li><a href="#">На заказ</a></li>
                        </ul>
                    </div>
                    <div class="category_settings_brend">
                        <span>Бренды:</span>
                        <ul class="brendy_menu">
                            <li><a class="click_settings" href="#">Все</a></li>
                            <li><a href="#">Samsung</a></li>
                            <li><a href="#">Panasonic</a></li>
                            <li><a href="#">Sony</a></li>
                            <li><a href="#">Pioneer</a></li>
                        </ul>
                    </div>
                    <div class="category_settings_sortirovka">
                        <span>Сортировать:</span>
                        <select name="name_spiska" >
                           <option value="0"> По наименованию </option>
                           <option value="1"> бла бла 1 </option>
                           <option value="2"> бла бла 2 </option>
                           <option value="3"> бла бла 3 </option>
                           <option value="4"> бла бла 4</option>
                        </select>
                    </div>
                </div>

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
.category_settings_panel{
height:52px;
margin-top:10px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background:url('images/category_settings_panel_fon.jpg') repeat-x;
}
.category_settings_tovari {
float:left;
width:200px;
text-align:center;
height:52px;
border-right:1px solid #c4c6c5;
}
.category_settings_tovari span{
display:inline-block;
margin:5px 0 0 0;
font-size:15px;
color:#1a456f;
}
.category_settings_tovari ul{
margin: 1px 0 0 13px;
padding:0px;
}
.category_settings_tovari ul li, .category_settings_brend ul li{
list-style:none;
float:left;
margin:0 3px;
}
.category_settings_tovari ul li a, .category_settings_brend ul li a{
display:block;
text-decoration:none;
color:#2b2a2a;
font-size:12px;
padding:3px 5px;
}
.category_settings_tovari ul li a:hover, .category_settings_brend ul li a:hover{
background-color:4c4a4b;
border-radius:9px;
color:#fff;
}
.click_settings{
background-color:4c4a4b;
border-radius:9px;
color:#fff !important;
}
.category_settings_brend{
float:left;
padding:5px 0 0 0;
border-right:1px solid #c4c6c5;
height:47px;
width:530px;
}
.category_settings_brend span{
margin-left:10px;
display:inline-block;
float:left;
font-size:15px;
color:#1a456f;
}
.category_settings_brend ul{
padding:0px;
margin:0px;
}
.category_settings_sortirovka{
height:42px;
padding:10px 0 0 0;
}
.category_settings_sortirovka select{
color:#5d5a5a;
font-size:12px;
}
.category_settings_sortirovka span{
display:inline-block;
margin:5px 0 0 0;
font-size:15px;
color:#1a456f;
margin-left:10px;
}

Так же есть скрипт.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
            $(document).ready(function(){
                $('.tovari_menu>li').click(function(){
                    $('.tovari_menu li a').removeClass('click_settings');
                    $('a',this).addClass('click_settings');
                });
                $('.brendy_menu>li').click(function(){
                    $('.brendy_menu li a').removeClass('click_settings');
                    $('a',this).addClass('click_settings');
                });
                $('.dostavka_div div').hover(function(){
                    $('span',this).css({'display':'inline-block'});
                });
                $('.dostavka_div div').mouseout(function(){
                    $('span',this).css({'display':'none'});
                });
            });

Теперь разберем на примере одного:

HTML5
1
2
3
4
5
6
7
8
                    <div class="category_settings_tovari">
                        <span>Товары</span>
                        <ul class="tovari_menu">
                            <li><a class="click_settings" href="#">Все</a></li>
                            <li><a href="#">В наличии</a></li>
                            <li><a href="#">На заказ</a></li>
                        </ul>
                    </div>

По умолчанию у первого элемента стоит класс click_settings. Работа скрипта заключается в том что при клике на другой элемент этого меню у всех элементов обнуляется класс click_settings и затем задается тому элементу по которому кликнули. Но незадача при клике страница перезагружается и все сбрасывается. Как сделать чтобы он запоминал тот элемент у коготоро щас стоит click_settings и перезагрузке ставил его.

@Vlad_IT · 29.08.2014, 17:06

Используйте localStorage.

@Firework · 29.08.2014, 19:49

Ну уберите атрибут href="#" у ссылок. Или так

HTML5
1
<a href="javascript:void(0)">

@antidemon92 · 29.08.2014, 20:24 **[ТС]**

Firework, в том и дело что href должен быть. при нажатии должно переходить на нужную страницу. и ссылка активной в данный момент страницы должна менять цвет

Добавлено через 8 минут
Vlad_IT, я не силен в JS поэтому не понял, как можно сохранить положение класса click_settings

@Firework · 29.08.2014, 20:25

Сообщение от antidemon92

Firework, в том и дело что href должен быть. при нажатии должно переходить на нужную страницу. и ссылка активной в данный момент страницы должна менять цвет

Ну значит в зависимости от страницы и присваивайте class="click_settings" нужному элементу.

@antidemon92 · 29.08.2014, 20:31 **[ТС]**

Firework,

Сообщение от Firework

Ну значит в зависимости от страницы и присваивайте lass="click_settings" нужному элементу.

Вы имели ввиду руками прописывать? а если у меня будет 70 таких страниц. очнь геморно

@Firework · 29.08.2014, 20:39

я как понял шапка у вас одна, а вот содержание контента уже разное - в зависимости от выбранной ссылки?

Добавлено через 5 минут

CSS
1
2
3
4
5
6
7
8
9
10
.click_settings{
background-color:4c4a4b;
border-radius:9px;
color:#fff !important;
}
li:target {
    background-color:4c4a4b;
    border-radius:9px;
    color:#fff !important;
}

HTML5
1
2
3
4
5
<ul class="tovari_menu">
                            <li><a class="click_settings" href="#">Все</a></li>
                            <li id="have"><a href="#have">В наличии</a></li>
                            <li><a href="#">На заказ</a></li>
                        </ul>

типа такого?

z-z · 29.08.2014, 20:47

стесняюсь спросить, а зачем вообще скриптом менять классы? Если кроме удаления/присваивания классов скрипт ничего не делает, можно его вообще выкинуть. Эта задача как правило решается силами сервера =) А каким способом решать - уже зависит от того, на чем реализована серверная часть.

ПС. Если уж совсем нужно делать только силами скрипта, можно взять такой бредовый метод: Берете href ссылки и сравниваете с location.href. Если ссылки совпадают - ставите класс, иначе ничего не делаете =)

@antidemon92 · 30.08.2014, 16:06 **[ТС]**

z-z, так и сделал

JavaScript
1
2
3
4
5
6
7
8
9
10
11
        <script>//Categpry
            $(document).ready(function(){
            $('.tovari_menu>li a').each(function () {
                    var location = window.location.href;
                    var link = this.href; 
                    if(location == link) {
                        $(this).addClass('click_settings');
                    }
                });
            });
        </script>

Добавлено через 9 минут
z-z, Firework, подскажите пожалуйста еще с одни вопросом. у меня 2 отдельные сортировки. я ставлю скрипт на каждую из них. Щас на примере:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="category_settings_tovari">
                        <span>Товары</span>
                        <ul class="tovari_menu">
                            <li><a href="">Все</a></li>
                            <li><a href="">В наличии</a></li>
                            <li><a href="">На заказ</a></li>
                        </ul>
                    </div>
                    <div class="category_settings_brend">
                        <span>Бренды:</span>
                        <ul class="brendy_menu">
                            <li><a href="#">Все</a></li>
                            <li><a href="">Samsung</a></li>
                            <li><a href="">Panasonic</a></li>
                            <li><a href="">Sony</a></li>
                            <li><a href="">Pioneer</a></li>
                        </ul>
                    </div>

К примеру в товары я жму в наличии. станица перезагружается к данной ссылке применяется класс click_settings. Далее я жму на другую сортировку по брендам: например самсунг. Страница перезагружается класс click_settings ставиться ссылке самсунг, и убирается с сылки в другом блоке сатировки( тобишь с наличия ссылка убралась). как сделать чтобы он как либо запоминал классы, и чтобы в каждой из сортировок был выбран только один варинт

@Firework · 30.08.2014, 17:26

HTML5
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<div class="category_settings_panel">
                    <div class="category_settings_tovari">
                        <span>Товары</span>
                        <ul class="tovari_menu">
                            <li><a class="click_settings" href="#">Все</a></li>
                            <li><a href="#">В наличии</a></li>
                            <li><a href="#">На заказ</a></li>
                        </ul>
                    </div>
                    <div class="category_settings_brend">
                        <span>Бренды:</span>
                        <ul class="brendy_menu">
                            <li><a class="click_settings" href="#">Все</a></li>
                            <li><a href="#">Samsung</a></li>
                            <li><a href="#">Panasonic</a></li>
                            <li><a href="#">Sony</a></li>
                            <li><a href="#">Pioneer</a></li>
                        </ul>
                    </div>
                    <div class="category_settings_sortirovka">
                        <span>Сортировать:</span>
                        <select name="name_spiska" >
                           <option value="0"> По наименованию </option>
                           <option value="1"> бла бла 1 </option>
                           <option value="2"> бла бла 2 </option>
                           <option value="3"> бла бла 3 </option>
                           <option value="4"> бла бла 4</option>
                        </select>
                    </div>
                </div>
                <style type="text/css">.category_settings_panel{
height:52px;
margin-top:10px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background:url('images/category_settings_panel_fon.jpg') repeat-x;
}
.category_settings_tovari {
float:left;
width:200px;
text-align:center;
height:52px;
border-right:1px solid #c4c6c5;
}
.category_settings_tovari span{
display:inline-block;
margin:5px 0 0 0;
font-size:15px;
color:#1a456f;
}
.category_settings_tovari ul{
margin: 1px 0 0 13px;
padding:0px;
}
.category_settings_tovari ul li, .category_settings_brend ul li{
list-style:none;
float:left;
margin:0 3px;
}
.category_settings_tovari ul li a, .category_settings_brend ul li a{
display:block;
text-decoration:none;
color:#2b2a2a;
font-size:12px;
padding:3px 5px;
}
.category_settings_tovari ul li a:hover, .category_settings_brend ul li a:hover{
background-color:4c4a4b;
border-radius:9px;
color:#fff;
}
.click_settings{
background-color:4c4a4b;
border-radius:9px;
color:#fff !important;
}
li:target {
    background-color:4c4a4b;
    border-radius:9px;
    color:#fff !important;
}
.category_settings_brend{
float:left;
padding:5px 0 0 0;
border-right:1px solid #c4c6c5;
height:47px;
width:530px;
}
.category_settings_brend span{
margin-left:10px;
display:inline-block;
float:left;
font-size:15px;
color:#1a456f;
}
.category_settings_brend ul{
padding:0px;
margin:0px;
}
.category_settings_sortirovka{
height:42px;
padding:10px 0 0 0;
}
.category_settings_sortirovka select{
color:#5d5a5a;
font-size:12px;
}
.category_settings_sortirovka span{
display:inline-block;
margin:5px 0 0 0;
font-size:15px;
color:#1a456f;
margin-left:10px;
}</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">$(document).ready(function(){
                $('.tovari_menu>li').click(function(){
                    // alert(this);
                    $('.tovari_menu li a').removeClass('click_settings');
                    $('a',this).addClass('click_settings');
                });
                $('.brendy_menu>li').click(function(){
                    $('.brendy_menu li a').removeClass('click_settings');
                    $('a',this).addClass('click_settings');
                });
                $('.dostavka_div div').hover(function(){
                    $('span',this).css({'display':'inline-block'});
                });
                $('.dostavka_div div').mouseout(function(){
                    $('span',this).css({'display':'none'});
                });
            });</script>

Если я вас правильно понял...

@antidemon92 · 30.08.2014, 17:59 **[ТС]**

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
script>//Categpry
            $(document).ready(function(){
            $('.tovari_menu>li a').each(function () {
                    var location = window.location.href;
                    var link = this.href; 
                    if(location == link) {
                        $(this).addClass('click_settings');
                    }
                });
            });
        </script>

Теперь другая сложность. На картинке Под цирфами 1 и 2 отмечены сортировки. как видно в первой сортировке выбран пункт На заказ во второй ничего не выбрано. Нужно чтобы при выборе чего либо во второй сортировки состояние первой сохранилось. Тобишь 1 обведенный элемент в первой сортировке и один во второй. и чтобы положение их запоминалось при перезагрузке страницы

@Firework · 30.08.2014, 21:26

У меня всё сохраняется. Выбираю "в наличии", потом "самсунг" - выделено "В наличии" и "самсунг". Т.е. состояние первой сохраняется.

z-z · 30.08.2014, 22:53

antidemon92, извините за, возможно, кривое напутствие, но я еще раз настоятельно рекомендую перенести всю эту логику на сервер, как и делают обычно нормальные крупные движки)) эти "состояния" обычно хранятся в URL страницы. Либо в последнее время стало модно хранить их в локальном хранилище клиента (это конечно не серверное программирование уже). Не красиво это расставлять классы в зависимости от URL))

@antidemon92 · 31.08.2014, 02:22 **[ТС]**

z-z, не глубоки мои познания во всем этом. а сделать нужно.

Добавлено через 10 минут
Firework, теперь уберите в href решетку и попробуйте

@Firework · 31.08.2014, 10:39

Сообщение от antidemon92

Firework, теперь уберите в href решетку и попробуйте

Вы же сами говорили, что переход по href должен осуществляться. Выложите код, который в реале. Тут не телепаты.

@antidemon92 · 31.08.2014, 13:53 **[ТС]**

Firework, я про то что если в href решетка (а у вас решетка, ну и у меня в примере была решетка мой косяк прошу прощения) это аналогично

JavaScript
1
<a href="javascript:void(0)">

http://452121.ru/catalog/avtozvuk-i-multimedia адрес сайта. там все увидите

Добавлено через 47 минут
Все решил проблему спасибо

@Firework · 31.08.2014, 17:35

Сообщение от antidemon92

Все решил проблему спасибо

Не по теме:

Если решили проблему, то желательно написать решение. Т.к. у кого-то другого может возникнуть подобная ситуация.

@antidemon92 · 01.09.2014, 00:51 **[ТС]**

JavaScript
1
2
3
4
5
6
7
8
        <script>//Categpry
            $(document).ready(function(){
                function clicker(that) {
                    var pick = that.options[that.selectedIndex].value;
                    location.href = pick;
                };
            });
        </script>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

@Vlad_IT 1452 / 360 / 61 Регистрация: 03.04.2010 Сообщений: 2,096
	29.08.2014, 17:06
	Используйте localStorage. 0

@antidemon92 1 / 1 / 6 Регистрация: 29.11.2013 Сообщений: 233
	29.08.2014, 20:24 [ТС]
	Firework, в том и дело что href должен быть. при нажатии должно переходить на нужную страницу. и ссылка активной в данный момент страницы должна менять цвет Добавлено через 8 минут Vlad_IT, я не силен в JS поэтому не понял, как можно сохранить положение класса click_settings 0

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	29.08.2014, 20:47
	стесняюсь спросить, а зачем вообще скриптом менять классы? Если кроме удаления/присваивания классов скрипт ничего не делает, можно его вообще выкинуть. Эта задача как правило решается силами сервера =) А каким способом решать - уже зависит от того, на чем реализована серверная часть. ПС. Если уж совсем нужно делать только силами скрипта, можно взять такой бредовый метод: Берете href ссылки и сравниваете с location.href. Если ссылки совпадают - ставите класс, иначе ничего не делаете =) 1

@Firework 102 / 93 / 36 Регистрация: 01.04.2013 Сообщений: 654
	30.08.2014, 21:26
	У меня всё сохраняется. Выбираю "в наличии", потом "самсунг" - выделено "В наличии" и "самсунг". Т.е. состояние первой сохраняется. 0

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	30.08.2014, 22:53
	antidemon92, извините за, возможно, кривое напутствие, но я еще раз настоятельно рекомендую перенести всю эту логику на сервер, как и делают обычно нормальные крупные движки)) эти "состояния" обычно хранятся в URL страницы. Либо в последнее время стало модно хранить их в локальном хранилище клиента (это конечно не серверное программирование уже). Не красиво это расставлять классы в зависимости от URL)) 0

@antidemon92 1 / 1 / 6 Регистрация: 29.11.2013 Сообщений: 233
	31.08.2014, 02:22 [ТС]
	z-z, не глубоки мои познания во всем этом. а сделать нужно. Добавлено через 10 минут Firework, теперь уберите в href решетку и попробуйте 0