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

@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>

Новые блоги и статьи Все статьи Все блоги /
Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI
Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .

@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