Форум

madeas · #1 (**permalink**) 17.09.2018, 16:39

Ребята, привет.
Пытаюсь сделать навигацию, с переключением активного класса, но немного застрял. Не работает переключение при использовании 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>

Dilettante_Pro · #2 (**permalink**) 17.09.2018, 16:44

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

рони · #3 (**permalink**) 17.09.2018, 16:54

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

link.onclick

такого нет в js

madeas · #4 (**permalink**) 17.09.2018, 17:26

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

Dilettante_Pro · #5 (**permalink**) 17.09.2018, 17:31

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 умная - делает циклы скрытно.

рони · #6 (**permalink**) 17.09.2018, 17:36

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

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

madeas · #7 (**permalink**) 17.09.2018, 17:52

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

Dilettante_Pro · #8 (**permalink**) 17.09.2018, 17:57

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

рони · #9 (**permalink**) 17.09.2018, 17:59

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

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

в строке 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'); 
 
           }
         });

madeas · #10 (**permalink**) 18.09.2018, 09:04

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

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

Форум

Справочник

Discord чат

Курсы javascript