JavaScript onClick addClass

Question

我有点困惑为什么我的代码无法正常工作，我希望你能告诉我我做错了什么。 我想在点击时突出显示导航标签。

HTML：

<header class="mainheader">
  <!-- Obrazek tutaj-->
  <nav>
    <ul>
      <li><a id="a-home" onclick="dodajAktywne(this)" href="index.html">Home</a></li>
      <li><a id="a-omnie" onclick="dodajAktywne(this)" href="omnie.html">O mnie</a></li>
      <li><a id="a-kurs" onclick="dodajAktywne(this)" href="kurs.html">Kurs</a></li>
      <li><a id="a-kontakt" onclick="dodajAktywne(this)" href="kontakt.html">Kontakt</a></li>
    </ul>
  </nav>
</header>

JavaScript的：

   function dodajAktywne(elem) {
    var a = document.getElementsByTagName('a')
    for (i = 0; i < a.length; i++) {
        a[i].classList.remove('active');
    }
    elem.classList.add('active');
}

CSS：

.active {
    color: blue;
    background-color: #cf5c3f;
}

Answer 1

您可以将JavaScript简化为：

Fiddle

function dodajAktywne(elem) {
    // get all 'a' elements
    var a = document.getElementsByTagName('a');
    // loop through all 'a' elements
    for (i = 0; i < a.length; i++) {
        // Remove the class 'active' if it exists
        a[i].classList.remove('active')
    }
    // add 'active' classs to the element that was clicked
    elem.classList.add('active');
}

如果您将HTML中的参数this传递给：

<header class="mainheader">
    <!-- Obrazek tutaj-->
    <nav>
        <ul>
            <li><a id="a-home" onclick="dodajAktywne(this)" href="#">Home</a>
            </li>
            <li><a id="a-omnie" onclick="dodajAktywne(this)" href="#">O mnie</a>
            </li>
            <li><a id="a-kurs" onclick="dodajAktywne(this)" href="#">Kurs</a>
            </li>
            <li><a id="a-kontakt" onclick="dodajAktywne(this)" href="#">Kontakt</a>
            </li>
        </ul>
    </nav>
</header>

注意：我已将href属性更改为#，您必须将其更改回.html页

---

或者，您可以使用CSS的:focus：

在没有JavaScript的情况下执行此操作

Fiddle

a:focus {
    color: blue;
    background-color: #cf5c3f;
}

Answer 2

此代码将突出显示导航选项卡，而无需在HTML中包含onclick，但如果单击其他选项卡则不会删除背景颜色。

    document.onclick = function(event) {
         var target = event.target || event.srcElement;
         target.style.background = '#cf5c3f';
        };

https://codepen.io/mdmcginn/pen/BwrNaj/

Answer 3

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);