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 🙂
Du musst angemeldet sein, um einen Kommentar abzugeben.
Vereinfachen Sie Ihr JavaScript um:
Fiddle
Wenn Sie übergeben die parameter
this
im HTML zu:Hinweis: ich habe mich verändert
href
Attribut#
Sie haben, um es zu ändern zurück zu Ihrem.html
SeitenAlternativ, Sie können dies tun, ohne JavaScript, mit CSS ist
:focus
:Fiddle
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.
https://codepen.io/mdmcginn/pen/BwrNaj/
JS: