主页 / 问题 / 1205815
Accepted
Canavar
Asked:2021-11-17 17:39:08 +0000 UTC2021-11-17 17:39:08 +0000 UTC

单击链接时，会向其中添加一个类，并从其他链接中删除该类。

  • 772

JS

'use strict'

let prof = document.getElementById('profMenu').childElementCount;
let el = document.getElementsByClassName('menu__link');



document.onclick = function(event) {
    for (let i = 0; i < prof; i++) {
        if (document.querySelector('.menu__link').contains('menu__link-active')) {
            el[i].classList.remove('menu__link-active');
        }
    }
    event.target.classList.add('menu__link-active');
}

HTML

<ul class="menu" id = 'profMenu'>
            <li class="menu__item">
                <a href="#" class="menu__link pr menu__link-active">
                    All
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link pr">
                    Modeling
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link pr">
                    Acting
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link  pr">
                    Corporate
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link pr">
                    Business
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link pr">
                    Professional
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link pr">
                    Group
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link pr">
                    Company
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link pr">
                    Officer
                </a>
            </li>
        </ul>

单击时，“menu__link-active”类被添加到所选元素，而其他应被删除。使用我的解决方案，仅在第一次单击时才删除该类，如果再次单击后，则保留前一个标签的类。

javascript

1 个回答

  1. Best Answer

    JS中有错误。

    document.querySelector('.menu__link').contains('menu__link-active')

    你可能错过了classList

    document.querySelector('.menu__link').classList.contains('menu__link-active')

    但是没有必要检查这个条件。

    像这样是正确的：

    document.onclick = function(event) {
    for (let i = 0; i < prof; i++) {
            el[i].classList.remove('menu__link-active');
    }
    event.target.classList.add('menu__link-active');
}

    在某种程度上，甚至这样会更好：

    [...document.querySelectorAll('menu__link')].map(
   el => el.addEventListener('click', event => {
      const active = document.querySelector('.menu__link.menu__link-active');
      if(active) {
         active.classList.remove('menu__link-active');
      }
      event.target.classList.add('menu__link-active');
   })
 );
    • 1

相关问题