Как кликая на ссылку присвоить class пункту меню?

Question

[Максим]

Почти готово ...но кликая на ссылку не знаю как присвоить class="active" родителю этой ссылке
Если промазать - тыкнуть не в ссылку то class`присваивается а вот по ссылке ...тщетно

Как это делается ?

Answer 1

[Дмитрий Баскаков]

Нужно в одной функции сбросить все активные классы, затем добавить активный класс к текущему элементу и затем выполнять нужные действия:

let parent = document.querySelector("ul");
let child = document.querySelectorAll("ul li");


let anchors = document.querySelectorAll('a[href*="#"]');

for (let anchor of anchors) {
  anchor.addEventListener("click", function (e) {
    e.preventDefault();
    
    for (let i = 0; i < child.length; i++) {
      child[i].classList.remove("active");
    }
    
    e.target.classList.add("active");
    this.parentNode.classList.add("active");
    let blockID = anchor.getAttribute("href").substr(1);

    document.getElementById(blockID).scrollIntoView({
      behavior: "smooth",
      block: "start"
    });
  });
}

Comments

[Максим]

что вы сделали ? можете объяснить ?

[Дмитрий Баскаков]

Максим Ленский, объединил событие родительской функции и дочерней
Вот это
parent.addEventListener("click", function)
с этим объединил
anchor.addEventListener("click", function)

[Максим]

Дмитрий Баскаков, я не знаю заметили ли вы это - но секции закатываются под меню - как это можно исправить ?

[Дмитрий Баскаков]

Максим Ленский, либо паддинг-топ сделать высотой с шапку, либо через высоту скрола делать всё

[Максим]

Дмитрий Баскаков, я добавлял и margin-top и padding-top для body и это не работает - scrollIntoView запихивает хоть при start end nearest - в самый вверх - под меню - тоже долго с этой проблемой воюю

[Максим]

Дмитрий Баскаков, чёрт с ним - с padding для секции работает -

Answer 2

[0xD34F]

const li = document.querySelectorAll('li');
li.forEach(n => n.addEventListener('click', onClick));

function onClick(e) {
  e.preventDefault();
  li.forEach(n => n.classList.toggle('active', n === this));
  const href = this.querySelector('a').getAttribute('href');
  document.querySelector(href).scrollIntoView({
    behavior: 'smooth',
  });
}

Comments

[Максим]

а как сделать что бы при скролле секции не закатывались под меню ?

[0xD34F]

Максим Ленский, вычисляйте величину прокрутки вручную, например:

window.scroll({
  top: document.querySelector(e.target.getAttribute('href')).offsetTop - this.offsetHeight,
  behavior: 'smooth',
});

[Максим]

0xD34F, с работы приду - буду бороться дальше - спасибо