JS добавление active

12
Stasmotion
На сайте с 16.11.2011
Offline
138
925

Изначально active добавлялся классу "projects-tab". Поменял обертку ссылкой для всего div блока. Как теперь добавлять active для класса "projects-a" ?

<div class="projects">
<nav class="projects__nav row">
<!-- projects-tab active -->
<a href="/dlja-fasada/" class="projects-a"><div class="projects-tab">Для фасада</div></a>
<a href="/dlja-interera/" class="projects-a"><div class="projects-tab">Для интерьера</div></a>
<a href="/dlja-sauny/" class="projects-a"><div class="projects-tab">Для сауны</div></a>
<a href="/dlja-hammama/" class="projects-a"><div class="projects-tab">Для хаммама</div></a>
<a href="/dlja-kuhni/" class="projects-a"><div class="projects-tab">Для кухни</div></a>
<a href="/dlja-dushevoj/" class="projects-a"><div class="projects-tab">Для душевой</div></a>
<div class="projects-tab active"><a href="/galereja-dlja-vannoj/">Для ванной</a></div>
</nav>
</div>

JS:

	function addActiveLinkNavigation () {

var siteUrl = window.location.href;
for ( var i = 0; i < $('.projects-tab a').length; ++i ) {
if ( $('.projects-tab a') == siteUrl ) {
$('.projects-tab a').parentNode.classList.add('active');
}
}
}
Комплексное SEO продвижение сайтов, полная отчетность Настройка и ведение Яндекс.Директ
R
На сайте с 04.12.2016
Offline
32
#1

Немного подробней опишите что именно вы хотите. И что не так получаете сейчас.

Вопрос элементарный, но вы как то непонятно описали...

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

У вас меню со ссылками и при опред. условии вы хотите одному из пунктов меню добавить класс "active".

Судя по js коду: Класс active добавляется обертке ссылки которая ведет на текущую страницу.

А теперь, напишите что вы хотите. В идеале со ссылкой на сайт.

Stasmotion
На сайте с 16.11.2011
Offline
138
#2
Redgektor:
Немного подробней опишите что именно вы хотите. И что не так получаете сейчас.

Вопрос элементарный, но вы как то непонятно описали...

Если я правильно понял:
У вас меню со ссылками и при опред. условии вы хотите одному из пунктов меню добавить класс "active".

Судя по js коду: Класс active добавляется обертке ссылки которая ведет на текущую страницу.

А теперь, напишите что вы хотите. В идеале со ссылкой на сайт.

https://pixel-mosaic.ru/2019/01/15/galereja-dlja-vannoj/

Active сейчас добавляется для класса "projects-tab"

Я последний пункт меню специально не трогал, чтобы было с чем сравнить.

А предыдущие пункты я обернул в <a href..> и присвоил новый класс "projects-a" - именно этому классу сейчас нужно добавлять active, чтобы было "projects-a active".

S
На сайте с 30.09.2016
Offline
459
#3

Наверное, так

function addActiveLinkNavigation(){
var siteUrl = window.location.href;
$('a.projects-a').each(function(){
if($(this).attr('href')==siteUrl){$(this).addClass('active');}
});
}
Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
S
На сайте с 13.10.2014
Offline
147
#4

поиграем в милторга


function addActiveLinkNavigation(){
$('a.projects-a[href="'+window.location.href+'"]').addClass('active');
}
Stasmotion
На сайте с 16.11.2011
Offline
138
#5
Sitealert:
Наверное, так
function addActiveLinkNavigation(){
var siteUrl = window.location.href;
$('a.projects-a').each(function(){
if($(this).attr('href')==siteUrl){$(this).addClass('active');}
});
}

Большое спасибо! Заработало

---------- Добавлено 25.02.2019 в 22:09 ----------

silicoid:
поиграем в милторга

function addActiveLinkNavigation(){
$('a.projects-a[href="'+window.location.href+'"]').addClass('active');
}

Как оказалось active нужен для "projects-tab", т.к. только в нем можно залить правильно background.

Перепробовал разные варианты, ничего не срабатывает:


function addActiveLinkNavigation(){
$('a.projects-tab[href="'+window.location.href+'"]').addClass('active');
}


function addActiveLinkNavigation(){
$('.projects-tab[href="'+window.location.href+'"]').addClass('active');
}


function addActiveLinkNavigation(){
$('.projects__nav .projects-tab[href="'+window.location.href+'"]').addClass('active');
}

Изначальный вариант тоже не работает, т.к. я div поместил внутрь <a href..>

S
На сайте с 13.10.2014
Offline
147
#6

Stasmotion, тогда надо было сделать вот так:

function addActiveLinkNavigation(){
$('a.projects-a[href="' + window.location.href + '"] > .projects-tab ').addClass('active');
}

этот пример хорош тем, что не использует перебор в цикле (вернее использует но на уровне парсера dom а не на уровне js интерпретатора), который достаточно медленный, поэтому, при некоторых условиях, подобная функция будет работать гораздо быстрее. Может быть даже в разы, чем вариант с each

зы

Изначальный вариант тоже не работает, т.к. я div поместил внутрь <a href..>

Ненадо помещать блочный элемент внутрь строчного, это не очень хорошая практика (скажем так, одно время оно даже считалось ошибкой)

S
На сайте с 30.09.2016
Offline
459
#7
silicoid:
этот пример хорош тем, что не использует перебор в цикле (вернее использует но на уровне парсера dom а не на уровне js интерпретатора)

А вот в этом я ой как не уверен. DOM выстраивается с учётом классов, а здесь используется значение атрибута - и мне сомнительно, что этот цикл не исполняется именно на уровне JS.

Все эти глупости имеют смысл больше для того, чтобы минифицировать код в стиле милторговских олимпиад, а по производительности - "бабка надвое сказала". Jquery - это библиотека, и надо смотреть, какие циклы там исполняются, чтобы докопаться до корней. Попробуйте сделать аналогичную операцию средствами чистого JS - и всё это безобразие вылезет как есть.

---------- Добавлено 26.02.2019 в 12:20 ----------

silicoid:
Ненадо помещать блочный элемент внутрь строчного, это не очень хорошая практика (скажем так, одно время оно даже считалось ошибкой)
Времена меняются. Это HTML5, и там совсем другие стандарты, приведённые в соответствие с современными реалиями. Блок делать ссылкой можно, и это нормальная практика.

---------- Добавлено 26.02.2019 в 12:37 ----------

Stasmotion:
Как оказалось active нужен для "projects-tab", т.к. только в нем можно залить правильно background.
И ещё много чего может вылезти. Присваивайте активный класс внешнему элементу и корректируйте код CSS.
S
На сайте с 13.10.2014
Offline
147
#8

Sitealert, Ну сделать эту операцию чистым джи эс это тоже не вопрос сделать.

 document.querySelector('a.projects-a[href="' + window.location.href + '"] > .projects-tab ').classList.add('active'); 

как видите, большой разницы в синтаксисе нет.

хотя, может быть вы и правы по поводу jquery

есть вероятность, что там дергается querySelectorAll, а потом циклом обегается.

Stasmotion
На сайте с 16.11.2011
Offline
138
#9
Sitealert:
И ещё много чего может вылезти. Присваивайте активный класс внешнему элементу и корректируйте код CSS.

Если active добавлять для "projects-a" то кнопка потом вот так заливается, вылезает за края http://prntscr.com/mqanq2

А если для "projects-tab" то все ок http://prntscr.com/mqaoz7

Но как добавлять в текущем JS active именно для "projects-tab" я так и не понял.

S
На сайте с 30.09.2016
Offline
459
#10
silicoid:
по поводу jquery

Немного почитал на эту тему и пожалуй соглашусь с Вами. Внутри Jquery при наличии валидного селектора используется именно метод querySelector.

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий