Javascript-форум - Работа с navbar. active class link

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Работа с navbar. active class link (https://javascript.ru/forum/dom-window/75262-rabota-s-navbar-active-class-link.html)

Работа с navbar. active class link

Ребята, привет.
Пытаюсь сделать навигацию, с переключением активного класса, но немного застрял. Не работает переключение при использовании querySelectorAll. Возможно, при чтении материалов что-то упустил, но не пойму почему не срабатывает. Скрипт работает при querySelector, но только на первую ссылку, но мне нужны все. Поэтому этот вариант не подходит. Закомментированный скрипт тоже не годится, так как работает только с jq. Подскажите, что не так со скриптом?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <style>
        .navbar-nav {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: row;
            flex-direction: row;
            padding-left: 0;
            margin-bottom: 0;
            list-style: none;
        }

        .nav-link {
            position: relative;
            margin: 15px;
            text-decoration: none;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .nav-link::before,
        .nav-link::after {
            content: '';
            position: absolute;
            left: 0;
            width: 100%;
            height: 2px;
            background: #d94f5c;
            -webkit-transform: scale3d(0, 1, 1);
            transform: scale3d(0, 1, 1);
            -webkit-transition: -webkit-transform 0.2s;
            transition: transform 0.2s
        }

        .nav-link::before {
            top: 0;
            -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%
        }

        .nav-link::after {
            bottom: 0;
            -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%
        }

        .nav-link.active::before,
        .nav-link.active::after {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
            -webkit-transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
            transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
            -webkit-transition-duration: 0.4s;
            transition-duration: 0.4s
        }
    </style>
    <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
        <li class="nav-item">
            <a class="nav-link active" href="#about">о нас</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#testing">испытания</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#reglaments">регламенты</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#map">контакты</a>
        </li>
    </ul>

    <script>
        /* jquery
        $('.navbar-nav .nav-link').click(function() {
            $('.navbar-nav .nav-link').removeClass('active');
            $(this).addClass('active');
        })
        */

        let link = document.querySelectorAll('.nav-link');
        link.onclick = function () {
            this.classList.toggle('active');
        }
    </script>

</body>

</html>

madeas,
Нужен цикл.

Цитата:

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

link.onclick

такого нет в js

рони,
как нет? а это? И скрипт же работает при querySelector

madeas,
даже 2 цикла

var link = Array.from(document.querySelectorAll('.nav-link'));
        link.forEach(function(it) {
           it.onclick = function () {
              link.forEach(function(el) {
                 el.classList.remove('active');
              });
              this.classList.toggle('active');
           }
         });

обработчик навешивается на конкретный элемент DOM,
querySelector дает конкретный элемент, querySelectorAll - коллекцию элементов

jQuery умная - делает циклы скрытно.

Dilettante_Pro,
может 1 цикл и

var el = document.querySelector('.nav-link.active');
el && el != this && el.classList.remove('active');
this.classList.toggle('active');

понял, потренируюсь. Спасибо.

рони,
Я что-то не понял - где обработчик кликов для всех элементов .nav-link?
Снаружи? И внутри ищется один .active?
remove тогда можно и без проверок - все равно потом назначится на нужный
Ведь активный при повторном клике по нему же выключать не нужно?

Цитата:

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

где обработчик кликов для всех элементов .nav-link?

:blink: в строке 3 где и был

var link = Array.from(document.querySelectorAll('.nav-link'));
        link.forEach(function(it) {
           it.onclick = function () {
              

var el = document.querySelector('.nav-link.active'); 


el && el != it && el.classList.remove('active'); 


it.classList.toggle('active'); 
 
           }
         });

Вот вроде смотрю на скрипт рони и казалось бы, ничего сложного... а сам бы не составил. Вечером пробовал составить аналог для скрипта копирования содержимого нескольких одноклассовых полей, но он не работает. Подскажите, что упустил?

let copy = Array.from(document.querySelectorAll('.copy'));
copy.forEach(function(teco) {
  teco.addEventListener('click',
    function(event) {
      let text = copy;
      text.select();
      document.execCommand('copy');
    });
});