Hervorgehobener Menüpunkt auf Unterseite

Allgemeine Fragen
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5865
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Hervorgehobener Menüpunkt auf Unterseite

Ungelesener Beitrag von Tommy Herrmann »

Moin Klaus,

Du weißt ja, ich will immer alles nicht nur machen, sondern muss was ich mache auch verstehen:


Get the first element with a class of 'test', or undefined if there is no matching element

Code: Alles auswählen

getElementsByClassName('eindeutigeKlasse')[0].getElementsByTagName('a')
Man sieht das mit einfachen ' Hochstrichen aber auch mit doppleten " Hochstrichen. Ist beides richtig?


Die [0] hatte ich nicht dabei, was ist das für ein Parameter in JavaScript und was macht der genau, was heißt jetzt hier "undefined" (nicht definiert) - Classes sind doch immer definiert.



Das Problem, das mich hier viele Stunden beschäftigt hatte, war eben der obere Teil des Navi-Codes:

Der Bereich <!-- Logo und Name in Navi --> wird mit dem jetzigen Script auch erkannt wenn im Script in der FOR Schleife der Zähler i=0 ist (logisch, weil es ja auch <a> Tags hat).

Um diese beiden <a> zu überspringen habe ich diesen Zähler eben gleich auf i=2 gesetzt.

Außerdem hat der Name (hier "Mobirise") immer ein <a> Tag, mit oder ohne gesetzten Link, das ist fatal und so von Mobirise falsch programmiert.

Also wollte ich den gesamten Bereich aussparen, was dann mit 2 x einer Class eigentlich gehen sollte, denn eine ID darf ich ja nicht doppelt verwenden.

Code: Alles auswählen

<!-- Logo und Name in Navi -->
<div class="navbar-brand">
    <span class="navbar-logo">
        <a href="https://www.mobirise-tutorials.com/" target="_blank">
            <img src="assets/images/logo-mobirise-250x250.png" alt="" title="Mobirise-Tutorials" style="height: 4.7rem;">
        </a>
    </span>
    <span class="navbar-caption-wrap"><a class="navbar-caption text-black display-7" href="https://www.mobirise-tutorials.com/" target="_blank">Mobirise</a></span>
</div>

Im Anschluss steht dann gleich der Hamburger Button, der nicht vom Script ausgespart werden darf, denn sonst kann man den Hamburger Button nicht mehr klicken.

Also dachte ich mir, OK - dann setze ich eben die id="mynav" nicht an das <nav> Tag, sondern beginne vor dem Hamburger Button hier mit einem neuen <div id="mynav">.

Das geht dann zwar aber die gesamte Formatierung von Mobirise gerät im Hamburger-Menü restlos durcheinander. Die Links stehen dann ganz rechts und mein Logo irgendwo mitten drinnen unten. Das passiert wohl, weil ein äußeres <div> weiter oben, alle die hierfür benötigten Classes trägt, die so außer Kraft gesetzt werden.

Code: Alles auswählen

<!-- Hamburger Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-bs-toggle="collapse" data-target="#navbarSupportedContent" data-bs-target="#navbarSupportedContent" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <div class="hamburger">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</button>

Insofern hätte ich wahrscheinlich dann mit zwei mal der class="mynav" genau das gleiche Problem.

Ich lasse das also jetzt so, wollte nur anfangen zu verstehen, wie das mit der Class überhaupt funktioniert. Ich habe das Problem nämlich hier nicht zum ersten Mal, immer wieder funktioniert bei mir "getElement" mit der ID aber nie mit der CLASS.
Klaus
Supporter
Supporter
Beiträge: 446
Registriert: Mi 21. Jul 2021, 00:43

Re: Hervorgehobener Menüpunkt auf Unterseite

Ungelesener Beitrag von Klaus »

document.getElementsByClassName('navbar')[0].getElementsByTagName('a');

Du bekommt ja von dem
document.getElementsByClassName('navbar')
auch wenn Du nur die eine navbar findest eine "HTMLCollection" zurück, also so was wie ein Array.
Auf das erste Element (hier die eine gefundene navbar) greift mann dann mit [0] zu.
An das was man gefunden (Ergenbis = HTMLCollection) hat kann man bequem mit einem . (Punkt)
den nächsten "Befehl" anhängen ... ist ein übliches Verfahren um Variablen für Zwischenergebnise zu sparen.

Kurz, es wird (hoffentlich) die navbar als Element 1 also [0] gefunden und drann hängt man dann die Suche nach allen <a> s, das Ergebnis ist dann wieder eine HTMLCollection (Array) in dem alle <a> s drinnen sind die in der Nav stecken.

Über die lässt man dann eine Schleife laufen und sucht ob in der Seite auf der man gerade ist (aktuelle Seite = document.location.href) irgend ein gefundenes <a> href enthalten ist und markiert das dann.
Kurz ist die aktuelle Seite irgendwo als in der Menüleiste drinnen, falls ja Klasse setzen.

Array etwas erklärt:
https://www.w3schools.com/js/tryit.asp? ... ay_element

Hier noch wie das in der Console aussieht mit den gefundenen "Arrays":
nav2.JPG
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5865
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Hervorgehobener Menüpunkt auf Unterseite

Ungelesener Beitrag von Tommy Herrmann »

Ahhhhh - ja dann ...

... ohne den Zusatz [0] würden alle in einer HTMLCollection zusammen aufgeführt und das kann dann ja nicht gehen :tu:

HTMLCollection ist eine Array-ähnliche Sammlung (Liste) von HTML-Elementen.

Verstanden - danke :hurra:

Erste Eintrag:
erste car.jpg

Dritte Eintrag:
dritte car.jpg

Alle Einträge:
Alle cars.jpg
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 145 Gäste