JavaScript onClick addClass

Ich bin irgendwie verwirrt warum mein code funktioniert nicht richtig, ich hoffe, Sie wird mir sagen, was ich falsch gemacht habe.
Ich möchte hervorheben, navigation Registerkarte, während geklickt.

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;
}
  • Sie sollten pass this übergeben das element selbst zu der Funktion.
  • OP-code ist arbeiten Geige. Ich denke, er meint, wenn er auf den link klickt, nicht halten Sie den Stil..
  • Ohne dass der eigentliche code ist es schwierig zu sagen, ich nehme an, dass Sie planen, Ihr <header> - tag auf jeder Seite, die Sie haben, genau wie Sie es geschrieben. Wenn dem so ist, dann sind Sie problem ist, dass so ein link geklickt wird die Seite neu geladen, und Ihre änderungen (Klasse hinzufügen), werden verworfen. Für die Zukunft ist es am besten, wenn Sie eine repro mit jsfiddle oder plunker
  • das führt zu einer Schlussfolgerung, die ich.e: omnie.html befolgt wird.
  • Geige fügen Sie return false; wenn Sie nicht wollen, um die Umleitung der Seite
  • Werden Sie umgeleitet werden zu einer ausgewählten Seite? Wenn ja, wie Lesen Sie die URI der aktuell geöffneten Seite?
  • Ja, ich bin umgeleitet wird zu einer ausgewählten Seite. Ich nicht Lesen Sie die URL der aktuell geöffneten Seite, die ich annehmen, ist die Lösung. Aber ich weiß noch nicht, wie das geht 🙂

InformationsquelleAutor Sheil | 2014-11-16
  1. 14

    Vereinfachen Sie Ihr JavaScript um:

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

    Wenn Sie übergeben die parameter this im HTML zu:

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

    Hinweis: ich habe mich verändert href Attribut # Sie haben, um es zu ändern zurück zu Ihrem .html Seiten

    Alternativ, Sie können dies tun, ohne JavaScript, mit CSS ist :focus:

    Fiddle

    a:focus {
    color: blue;
    background-color: #cf5c3f;
}
    • Ich habe versucht beide Optionen, keiner von Ihnen arbeiten, wie beabsichtigt. Nav-Tasten verlieren Ihren Fokus.
    • Sie möchten die previous-Taste um aktiv zu sein, auch wenn ein anderer button geklickt wird?
    • Keiner ist aktiv. Wenn ich auf einen anderen link, also nach Hause, ich will Home button aus der navigation aktiv zu sein und hervorgehoben werden.
    • Das problem ist, dass meine Seite umgeleitet wird, wenn ich Sie auf einer beliebigen Registerkarte von der navigation. Wenn ich aufgehört habe, umleiten Ihr code funktioniert perfekt.
    • jsfiddle.net/pb95kv32/2 Dies ist, wie ich das machte. Funktioniert nun korrekt. Thx für die Hilfe, ich werde Stimmen Du bis 🙂
    • Große!!!!!!!!!! 🙂
    • die erste Lösung ist, was ich Suche, aber mit reactjs syntax

    InformationsquelleAutor Weafs.py
  2. 1

    Dieser code wird markieren Sie die Registerkarte "navigation", ohne zu zählen onclick im HTML, wenn es nicht, entfernen Sie die hintergrund-Farbe, wenn Sie eine andere Registerkarte geklickt wird.

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

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

    InformationsquelleAutor Michael McGinnis
  3. -1

    JS:

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

    • Fügen Sie bitte die Erklärung auf deine Antwort.
    InformationsquelleAutor Đức Lê
Schreibe einen Kommentar