web-dev-qa-db-ja.com

JavaScript onClick addClass

私のコードが正しく動作しない理由を少し混乱させています。私が間違ったことを教えてくれることを願っています。クリックしながらナビゲーションタブを強調表示したい。

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;
}
javascripthtmlcssonclick
10
Sheil

JavaScriptを次のように単純化できます。

フィドル

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なしでこれを実行できます。

フィドル

a:focus {
    color: blue;
    background-color: #cf5c3f;
}
15
Weafs.py

このコードは、HTMLにonclickを含める必要なく、ナビゲーションタブを強調表示しますが、別のタブをクリックしても背景色は削除されません。

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

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

1
Michael McGinnis
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);
0
Đức Lê