JavaScript onClick addClass [英] JavaScript onClick addClass

问题描述

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

HTML：

 < header class =mainheader> 
<！ -  Obrazek tutaj  - > 
< nav> 
< ul> 
< li>< a id =a-homeonclick =dodajAktywne（this）href =index.html>首页< / a>< / li& 
< li>< a id =a-omnieonclick =dodajAktywne（this）href =omnie.html> O mnie< / a>< / li> 
< li>< a id =a-kursonclick =dodajAktywne（this）href =kurs.html> Kurs< / a>< / li& 
< li>< a id =a-kontaktonclick =dodajAktywne（this）href =kontakt.html> Kontakt< / a>< / li> 
< / ul> 
< / nav> 
< / header> 
  

JavaScript：

 code> function dodajAktywne（elem）{
 var a = document.getElementsByTagName（'a'）
 for（i = 0; i a [i] .classList.remove（'active'）; 
} 
 elem.classList.add（'active'）; 
} 
  

CSS：

  .active {
 color：blue; 
 background-color：＃cf5c3f; 
} 
  

解决方案

：

小提琴

  function dodajAktywne（elem）{
 //获取所有的'a'元素
 var a = document.getElementsByTagName（'a'）; 
 //循环遍历所有的'a'元素
 for（i = 0; i  //删除类'active' $ ba [i] .classList.remove（'active'）
} 
 //将'active'类添加到单击的元素
 elem.classList.add（'active'） ; 
} 
  

如果您传递参数 this 在HTML中：

 < header class =mainheader> 
<！ -  Obrazek tutaj  - > 
< nav> 
< ul> 
< li>< a id =a-homeonclick =dodajAktywne（this）href =＃>首页< / a> 
< / li> 
< li>< a id =a-omnieonclick =dodajAktywne（this）href =＃> O mnie< / a> 
< / li> 
< li>< a id =a-kursonclick =dodajAktywne（this）href =＃> Kurs< / a> 
< / li> 
< li>< a id =a-kontaktonclick =dodajAktywne（this）href =＃> Kontakt< / a> 
< / li> 
< / ul> 
< / nav> 
< / header> 
  

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

---

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

小提琴

  a：focus {
 color：blue; 
 background-color：＃cf5c3f; 
} 
  

I am kind of confused why my code doesn't work correctly, I hope You will tell me what I've done wrong. I want to highlight navigation tab while clicked.

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;
}

解决方案

You can simplify your JavaScript to:

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');
}

If you pass the parameter this in your HTML to:

<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>

Note: I've changed href attribute to #, you will have to change it back to your .html pages

---

Alternatively, you can do this without JavaScript, using CSS's :focus:

Fiddle

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

这篇关于JavaScript onClick addClass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！