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

@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-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

@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