Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Не получается назнаяить active вкладке меню (https://javascript.ru/forum/dom-window/81709-ne-poluchaetsya-naznayait-active-vkladke-menyu.html)

Vaska 15.01.2021 14:51

Не получается назнаяить active вкладке меню
 
Приветствую!
Есть меню, в котором поменял ссылки с атрибута а, на атрибут span.
<nav id='cssmenu'>			
	<ul class="menu">
		<li>
			<span class="ahref hidden-link-innen" data-link=''>Menu 1</span>
			<ul>
				<li>
					<span class="ahref hidden-link-innen" data-link="">Sub Menu 1</span>
					<ul class="class_child">
						<li><span class="ahref hidden-link-innen" data-link="">Sub Sub Menu 1</span></li>
					</ul>
				</li>
				<span class="ahref hidden-link-innen" data-link="">Sub Menu 2</span>
				<span class="ahref hidden-link-innen" data-link="">Sub Menu 3</span>
			</ul>
		</li>												
		<span class="ahref hidden-link-innen" data-link=''>Menu 1</span>
		<span class="ahref hidden-link-innen" data-link=''>Menu 1</span>
	</ul>
</nav>

Скрипт, который заставляет ссылки работать:
//ссылка в span вместо a
$(document).ready(function(){
	$('.hidden-link-innen').click(function(){window.location = $(this).data('link'); return false;});
});

И скрипт, который назначает active активной вкладке меню, когда есть атрибут <a> и href:
$(function () { 
		$('.menu a').each(function () {
			var location = window.location.href;
			var link = this.href; 
			if(location == link) {
				$(this).addClass('active');
			}
		});
	});

Я попробывал заменить $('.menu a') на $('.menu span') и .href на data('link'), но не работает, не назначает ссылке в <span> класс active и браузер ругается.

Можете помочь исправить скрипт?

рони 15.01.2021 15:16

Vaska,
:-?
$(function () {
        $('.hidden-link-innen').each(function () {
            if(window.location == $(this).data('link')) {
                $(this).addClass('active');
            }
        });
    });

Vaska 15.01.2021 15:41

рони,
Не работает. Не присваивает active. Браузер ошибки не выдает.

рони 15.01.2021 15:51

Vaska,
так выведите в консоль что у вас в window.location и $(this).data('link')
возможно нужен if($(this).data('link').indexOf(window.location.hr ef) !== -1)

Vaska 15.01.2021 16:45

Цитата:

Сообщение от рони (Сообщение 532773)
Vaska,
if($(this).data('link').indexOf(window.location.hr ef) !== -1)

Это тоже не работает.

рони 15.01.2021 16:53

Vaska,
$(function () {
        $('.hidden-link-innen').each(function () {
            console.log(window.location, $(this).data('link'))
            if(window.location == $(this).data('link')) {
                $(this).addClass('active');
            }
        });
    });

Vaska 15.01.2021 17:18

рони,
В меню получается два блока <ul> с разными названиями классов, и в каждом блоке есть по одной одинаковой ссылке /home/store/feedback_score/store_id/1.html
У второго блока <ul class="menu2">
Я просто не думал, что вы сделаете через класс в span, а не так как раньше было через класс в <ui>. Поэтому я не указал, в начале, про второй блок в меню.

рони 15.01.2021 17:20

Vaska, пробуйте
$(function () {
        $('.hidden-link-innen').each(function () {
            let href = window.location.href, link = $(this).data('link');
            if(href.indexOf(link) !== -1) {
                $(this).addClass('active');
            }
        });
});

Vaska 15.01.2021 17:31

рони,
Работает, но не совсем так как раньше.
Сейчас, если в меню есть суб-меню, то только ему назначает active, а раньше и первой вкладке и подменю назначалось. (вроде так было, несколько часов назад, если я ничего не путаю)
Если сейчас я на странице подменю, то первая вкладка не подсвечивается и я не вижу в каком меню я сейчас нахожусь.

рони 15.01.2021 17:39

Vaska,
$(function () {
        $('.hidden-link-innen').each(function () {
            let href = window.location.href, link = $(this).data('link');
            if(href.indexOf(link) !== -1) {
                $(this).addClass('active').parents().addClass('active');
            }
        });
});


Часовой пояс GMT +3, время: 10:20.