Как выделять активным и пункт меню (якорь), и сам блок на который он ведет?

Question

[K G]

Доброго времени суток, имеются якоря(назовем их пункты меню для простоты) на некоторые блоки на странице, по клику на пункт ему присваивается класс .active и страница перематывается до нужного блока.
А как добавить при этом самим блокам класс .active?
Я мыслю так: если у пункта есть класс .active и атрибут href=#one, тогда блоку с id=one добавить класс .active. Но а если элементов штук 15 будет, то так как-то не правильно перебирать каждый. Можно универсально сделать?

Answer 1

[Кирилл Пензин]

function addClass() {
  	var id = $(this).attr('href');
  	$("a").removeClass('active');
        $("div").removeClass('active');
  	$(this).addClass('active');
  	$(id).addClass('active');
}

	var nodeList = document.querySelectorAll('a');

	for( var i = 0; i < nodeList.length; i++) {
		nodeList[i].addEventListener('click', addClass);
	}

Comments

[K G]

Кирилл Пензин спасибо, не пойму только где тут связь с теми блоками на которые ведет якорь и которые должны становится активными. вот так код мой сейчас выглядит:
function addClass() {
var id = this.href.split('#')[2];
$(".bank-filter__tabs a").addClass('active');
/* добавить код для удаления класса эктив у остальных */
$(".bank-filter__tabs a").removeClass('active');
$(this).addClass('active');
}

var nodeList = document.querySelectorAll('.link'); /* .link - класс у всех ссылок */

for( var i = 0; i < nodeList.length; i++) {
nodeList[i].addEventListener('click', addClass);
}

[K G]

Кирилл Пензин работает сейчас так же, как и предыдущий мой код, который только ссылкам класс навешивал/убирал
$(".bank-filter__tabs a").click(function(e) {
e.preventDefault();
$(".bank-filter__tabs a").removeClass('active');
$(this).addClass('active');
});

[Кирилл Пензин]

pwnography: я, конечно, сильно извиняюсь, но Вы объявляете id для элемента, чтобы потом его не использовать?) Надо взять по нему элемент и добавить ему класс.

function addClass() {
var id = this.href;
/* добавить код для удаления класса эктив у остальных */
$(".bank-filter__tabs a").removeClass('active');
$(this).addClass('active');
$(id).addClass('active'); //ищем элемент по ид и добавляем ему класс
}

[K G]

Кирилл Пензин то есть для каждого элемента отдельно это делать? допустим у меня 7 пунктов, вот я кликнул на первый у меня ссылка стала активной я ищу элемент с id="one" и даю ему тоже .active, далее я кликаю на вторую ссылку, он делается .active, а как дальше написать, чтобы у второго блока с id="two" добавился .active? Ту же самую функцию еще раз ниже скопировать и вставить, только теперь id="two" и так 7 раз?

[Кирилл Пензин]

pwnography: не надо копировать ничего. id для того и определяется из ссылки, чтобы одной функции хватило на все элементы. Надо только зарегистрировать её в качестве обработчика на все ссылки.

[K G]

Кирилл Пензин понятно только то, что ничего не понятно)) к моему сожалению

[Кирилл Пензин]

pwnography: Хорошо. Разберём по порядку.
0. Пишем функцию-обработчик

function addClass() {
  var id = this.href.split('#')[2];
  $(id).addClass('active');
  /* добавить код для удаления класса эктив у остальных */
}

1. Мы фиксируем одну функцию для обработки ВСЕХ кликов на ВСЕХ ссылках

var nodeList = document.querySelectorAll('selector-for-all-links');

for( var i = 0; i < nodeList.length; i++) {
  nodeList[i].addEventListener('click', addClass);
}

2. Когда мы попадаем в функцию, сработавшую по клику, this равен текущем элементу(ссылке, в данном случае). Из него мы извлекаем аттрибут href, который содержит нужный нам id, после чего ищется нужный элемент по нему. id -- переменная, значение которой само меняется в зависимости от значения href ссылки, по которой был произведён клик.

Так понятно?)

[K G]

Кирилл Пензин То есть весь код должен выглядеть вот так:
function addClass() {
var id = this.href;
$(".link").removeClass('active');
$(this).addClass('active');
$(id).addClass('active'); //ищем элемент по ид и добавляем ему класс
}

var nodeList = document.querySelectorAll('.link'); /* .link - класс у всех ссылок */

for (var i = 0; i < nodeList.length; i++) {
nodeList[i].addEventListener('click', addClass);
}
То что вы описали выше, я понимаю, я не понимаю момента как сделать чтобы выделялись нужные блоки, при данном коде только ссылки активными становятся.

[Кирилл Пензин]

pwnography: https://jsfiddle.net/Ljqhznpy/ вот рабочий пример

[K G]

Кирилл Пензин спасибо за ваше терпение, есть у меня конечно еще проблемка с этими пунктами((

Answer 2

[Николай Лапшин]

Как определяете блок, на который ведет пункт меню?
Вот по этому же принципу и класс .active добавляйте.
Можете наклепать в блоках дополнительный class типа "href_one" и делать jQuery(".href_one").addClass(".active")

Comments

[K G]

Николай Лапшин как я определюсь блока на который ведет пункт? Так связываю атрибут href пункта с соответствующим id блока. То есть вы предлагаете добавлять класс по тому принципу, что я описал выше в вопросе?

[Николай Лапшин]

pwnography: Ну или $('a[href="/info/about"]'), где href - ваша ссылка.