Class Active не срабатывает

@gjboy · Регистрация: 02.07.2014

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

Здравствуйте, хочу добавить определенные функции, чтоб выделенный пункт меню подсвечивался, для этого собираюсь использовать класс актив. Но выходит такая проблема, он сначала появляется, потом страничка обновляется(переходит на новую страницу) и класс теряет актив. Пытался так же через css a:active сделать, аналогично. Все дело происходит в opencart 2
Вот код создания аккордеон меню.

PHP/HTML
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
<div class="mini-menu">
 
 <ul>
  <?php foreach ($categories as $category) { ?>
 
  <?php if ($category['children']) { ?>
    <li class="sub3"><a href="<?php echo $category['href']; ?>" ><i class="fa fa-angle-down" aria-hidden="true"></i>&nbsp;&nbsp;<?php echo $category['name']; ?></a>
 
     <ul>
  <?php foreach ($category['children'] as $child) { ?>
  <li><a href="<?php echo $child['href']; ?>" class="active">&nbsp;&nbsp;<?php echo $child['name']; ?></a>
 
 
  </li>
  <?php } ?>
 
  </ul>
 
  </li>
  <?php } else { ?>
  <li style="list-style-type: none;"><a href="<?php echo $category['href']; ?>" ><?php echo $category['name']; ?></a></li>
  <?php } ?>
  <?php } ?>
</ul>
</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
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
134
135
#menu-v li, #menu-v a {zoom:1;} /* Hacks for IE6, IE7 */
#menu-v, #menu-v ul
{
   
    position: relative; font-size:0;
    list-style: none; margin: 0; padding: 0; margin-right: -22px; display:block;
    z-index:9;
   
}
 
}
                
 
 
#menu-v li
{
    background:  #fff;
    list-style: none; margin: 0; padding: 0;
 
 
}
#menu-v1 li a
{
    font: normal 12px Arial;
    border-bottom: 1px solid #f2f2f2;
    display: block;
    /*overflow: auto; force hasLayout in IE7 */
    color: black;
    text-decoration: none;
    line-height:40px;
    padding-left:26px;   
    text-transform: uppercase;   
  
}
#menu-v ul li a
{
    line-height: 40px;
       padding-left:26px;   
 
}
 
 
                
 
 
}
#menu-v1 li a:hover {
  color: #fff;
}
#menu-v1 ul li a:hover{ color: #fff; }
        
 
#menu-v li ul
{
    position: absolute;
    min-width: 300px; 
    visibility:hidden;
}
        
 
#menu-v1 li:hover, #menu-v1 li.onhover
{
    
        background: #64CEFD;
        border-color: #64CEFD;
        color: #fff;
 
}
#menu-v ul li
{
    background:  #fff;
    background-image:none;
    border: none;
    padding: 0px !important;
      -webkit-box-shadow: 0px 26px 41px 0px rgba(0, 0, 0, 0.13);
  -moz-box-shadow: 0px 26px 41px 0px rgba(0, 0, 0, 0.13);
  box-shadow: 0px 26px 41px 0px rgba(0, 0, 0, 0.13);
    z-index: 999999;
 
 
}
#menu-v1 ul li:hover, #menu-v1 ul li.onhover
{
    background: #64CEFD;
    background-image:none;
}
.mini-menu{
    margin: 0px auto;
    font: normal 14px Helvetica, Arial, sans-serif;
}
.mini-menu ul {
    list-style: none;
    margin: 0;
    padding:0;
    text-align:left;
}
.mini-menu > ul > li {
    position: relative;
}
.mini-menu > ul > li > a {
    display: block; 
    outline: 0; 
    padding: .7em 1em;  
    text-decoration: none;  
    color:#000000;  
    font-weight: normal;    
 
 
}
.mini-menu > ul > li > a:hover {
   
    background: #d8d8d8;
}
.mini-menu .sub2 > ul {
    counter-reset: items;
    margin-left: 15px;
    overflow: hidden;
   
}
.mini-menu .sub2 > ul > li > a {
    counter-increment: items;
    color:#000000;
    font-size: 12px;
    display: block;
    text-decoration: none;
    padding: 4px
    }
.mini-menu .sub2 > ul > li > a:hover {
    
    background: #d8d8d8;
}
.mini-menu .sub2 > ul > li > a:active {
    
    background: #ffd800;
}

и скрипт который вшил в шапку.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
        <script type="text/javascript">
    $(document).ready(function () {
        $(".sub2 > a").click(function() {
            var ul = $(this).next(),
                    clone = ul.clone().css({"height":"auto"}).appendTo(".mini-menu"),
                    height = ul.css("height") === "0px" ? ul[0].scrollHeight + "px" : "0px";
            clone.remove();
            ul.animate({"height":height});
            return false;
        });
           $('.mini-menu > ul > li > a').click(function(){
           $('.sub2 a').removeClass('active');
           $(this).addClass('active');
        }),
           $('.sub2 ul li a').click(function(){
           $('.sub2 ul li a').removeClass('active');
           $(this).addClass('active');
        });
    });
</script>

Как я только не добавлял и где только не добавлял этот active. Подскажите пожалуйста как правильно.

@kalabuni · 23.07.2018, 19:33

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

и совет на будущее: выкладывать в этом разделе нужно код, который поступает в браузер, сиречь БЕЗ каких-либо PHP-вставок

@gjboy · 25.07.2018, 10:30 **[ТС]**

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

фактически вам надо передать информацию о выделенном пункте меню с одной страницы на другие
этот вопрос здесь многократно обсуждался
необходимо на всех участвующих в процессе страницах иметь одинаковый скриптовой код, который будет записывать и прочитывать состояние меню с помощью либо cookie, либо localstorage (второе проще в оформлении)
и совет на будущее: выкладывать в этом разделе нужно код, который поступает в браузер, сиречь БЕЗ каких-либо PHP-вставок

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="mini-menu">
 
 <ul>
<li class="sub2"><a href="#"><i class="fa fa-angle-down" aria-hidden="true"></i>&nbsp;&nbsp;Детский вязаный трикотаж    </a>
     <ul>
    <li class="sub3"><a href="#" class="active">&nbsp;&nbsp;Костюмы</a>
  </li>
    <li class="sub3 active"><a href="#" class="active">&nbsp;&nbsp;Комбинезоны</a>
  </li>
    <li class="sub3"><a href="#" class="active">&nbsp;&nbsp;Платья, сарафаны и&nbsp;туники</a>
  </li>
    <li class="sub3"><a href="#" class="active">&nbsp;&nbsp;Кофты, свитера</a>
  </li>
    <li class="sub3"><a href="#" class="active">&nbsp;&nbsp;Штаны</a>
  </li>
    <li class="sub3"><a href="#" class="active">&nbsp;&nbsp;Безрукавки</a>
  </li>
    <li class="sub3"><a href="#" class="active">&nbsp;&nbsp;Ажурка&nbsp;— ВЕСНА!</a>
  </li>
   </ul>
  </li>
  </ul>
  </div>

JavaScript
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
    $(document).ready(function () {
        $(".sub2 > a").click(function() {
            var ul = $(this).next(),
                    clone = ul.clone().css({"height":"auto"}).appendTo(".mini-menu"),
                    height = ul.css("height") === "0px" ? ul[0].scrollHeight + "px" : "0px";
            clone.remove();
            ul.animate({"height":height});
            return false;
        });
           $('.mini-menu > ul > li > a').click(function(){
           $('.sub2 a').removeClass('active');
           $(this).addClass('active');
        }),
           $('.sub2 ul li a').click(function(){
           $('.sub2 ul li a').removeClass('active');
           $(this).addClass('active');
        });
        $('.sub3').on('click', function() {
  $('.sub3').removeClass('active');
  $(this).addClass('active');
  var sub3Count = $(this).index();
  localStorage.setItem('LCount', sub3Count);
});
 
var _this = localStorage.getItem("LCount");
 
if ( _this === null ) { return false } else {
  $('.sub3').eq(_this).addClass('active');
}
    });

Вроде использовал localstorage и все получается, при клике нужный li становится active.
только теперь беда в том, что не могу ему css обозначить, чтобы при active он заливался нужным цветом.

CSS
1
2
3
.sub3:active {
    background: #ffd800;
}

В чем косяк? В интернетах читал, вроде для li можно задавать псевдокласс active. или только для "a"? Но у меня все ссылки изначально active стоят, но все равно не подсвечиваются.

Добавлено через 10 часов 25 минут
Правильно говорят, утро вечера мудренее.
Все решилось просто, через css. Предыдущий мой пост дурь))

@gjboy · 25.07.2018, 11:06 **[ТС]**

kalabuni, к сожалению, обнаружилась еще одна проблема. В первом списке работает корректно, а вот когда кликаешь на какой то элемент из второго списка то уже active1 передается опять верхнему списку.
вот пример.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="mini-menu">
 <ul>
    <li style="list-style-type: none;"><a href="#">Каталог товаров</a></li>
    <li class="sub2"><a href="#"><i class="fa fa-angle-down" aria-hidden="true"></i>&nbsp;&nbsp;Летний детский трикотаж</a>
    <ul>
    <li class="sub3"><a href="#" class="active">&nbsp;&nbsp;Летняя верхняя одежда 2018!!!</a>
  </li>
    <li class="sub3 active1"><a href="#" class="active">&nbsp;&nbsp;Летние головные уборы 2018</a>
  </li>
  </ul>
  </li>
    <li class="sub2"><a href="#"><i class="fa fa-angle-down" aria-hidden="true"></i>&nbsp;&nbsp;Теплые принадлежности</a>
    <ul>
    <li class="sub3"><a href="#" class="active">&nbsp;&nbsp;Пинетки, носки, шарфы, одеяло…</a>
  </li>
  </ul>
  </li>
  </ul>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function () {
       
  $('.sub3').on('click', function() {
  $('.sub3').removeClass('active1');
  $(this).addClass('active1');
  var sub3Count = $(this).index();
  localStorage.setItem('LCount', sub3Count);
});
 
var _this = localStorage.getItem("LCount");
 
if ( _this === null ) { return false } else {
  $('.sub3').eq(_this).addClass('active1');
}
    });

CSS
1
2
3
.active1 {
  background:#ffd800;
}

@gjboy · 25.07.2018, 12:32 **[ТС]**

Заменить это

JavaScript
1
$(this).index()

на

JavaScript
1
$('.sub3').index(this)

решает ситуацию)

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	23.07.2018, 19:33
	Сообщение было отмечено gjboy как решение Решение фактически вам надо передать информацию о выделенном пункте меню с одной страницы на другие этот вопрос здесь многократно обсуждался необходимо на всех участвующих в процессе страницах иметь одинаковый скриптовой код, который будет записывать и прочитывать состояние меню с помощью либо cookie, либо localstorage (второе проще в оформлении) и совет на будущее: выкладывать в этом разделе нужно код, который поступает в браузер, сиречь БЕЗ каких-либо PHP-вставок 1

Class Active не срабатывает

Решение