Frage von abbrechen, 26

jQuery und anchor name Verknüpfung?

Hi,

mein Menü hat je nach Breakpoint unterschiedliche Verknüpfungen. Ab 980px wird man zum Anchor name #programm weitergeleitet, wenn man auf "Programm" klickt und unter 980px ist die Verknüpfung "#", damit sich das Submenü öffnet, dass es auch nur in der unter 980px Version gibt. Bennene ich mit jQuery je nach Maße unterschiedliche Verknüpfungen klappt das nur theorietisch. Gebe ich dem "Programm" bereits in der html die Verknüpfung #programm, klappt es auf der >980 Version wunderbar, doch auf der darunter übernehmen die Submenüpunkte die "#" Verknüpfung und man geklangt nicht zu den verknüpften Unterpunkten. Drehe ich das Ganze um und gebe in der html die "#" Verknüpfung und sage, dass wenn die Weite höher als 980 ist, soll die Verknüpfung zu "#programm" geändert werden, bekomme ich beim Klick zwar in der url ein #programm hinzugefügt, aber es entsteht keine Weiterleitung, nur die url-Erweiterung.

Dann habe ich versucht mit der ursprünglichen Version (im html #programm und <980 Verknüpfung zu "#") den Unterpunkten eigene Funktionen zu geben, da sie ursprünglich die Verknüpfung des Elternelementes übernehmen. Wie bei der umgedrehten Version erweitert sich die url, aber eine Weiterleitung kommt nicht zustande.

Die Chrome Console spuckt mir bei diesem Vorgang folgende Fehlermeldung aus, mit der ich bisher nicht viel anfangen konnte:

**jquery.js:1468 Uncaught Error: Syntax error, unrecognized expression: [name=]

Sizzle.error @ jquery.js:1468

Sizzle.tokenize @ jquery.js:2125

Sizzle.select @ jquery.js:2546

Sizzle @ jquery.js:869

find @ jquery.js:2792

jQuery.fn.init @ jquery.js:2909

jQuery @ jquery.js:75

(anonymous function) @ smooth-jump.js:5

dispatch @ jquery.js:4737

elemData.handle @ jquery.js:4549**

Nun zum Code. Wer sich fragt, warum ich .hover, statt .click, benutzt habe. Mit .click hat es nicht funktioniert. Der Klick wurde vor der Prämisse ausgeführt.

html

<li class="programm"><a class="prlink" href="#programm">Programm</a>
                    <ul class="sub">
                        <li><a id="fri" href="#freitag">FREITAG</a></li>
                        <li><a id="sam" href="#samstag">SAMSTAG</a></li>
                        <li><a id="son" href="#sonntag">SONNTAG</a></li>
                    </ul>
                </li>

jQuery

  $('.programm').hover(function() {
        if ($(window).width() < 980) {
            $(".programm a").attr("href", '#');
        } else {
            $(".programm a").attr("href", '#programm');
        }
    });

    $('.programm').hover(function() {
        if ($(window).width() < 980) {
            $("#fri").attr("href", '#freitag');
        } else {
            $("#fri").attr("href", '#freitag');
        }
    });

    $('.programm').hover(function() {
        if ($(window).width() < 980) {
            $("#sam").attr("href", '#samstag');
        } else {
            $("#sam").attr("href", '#samstag');
        }
    });

kein Platz, selbes für S

Antwort
von Scrummer, 13

Aaaaalso:

Erstens; Verstehe ich das richtig, dass du eine Menu machen willst, welches sich responsive verhält und dementsprechend verändert? Wenn ja, würde ich das zu 100% mit CSS umsetzten. Das geht viel einfacher.

Solltest du wirklich gewillt sein, das mit JS umzusetzen, würde ich sagen dein Fehler liegt erstmal daran, dass JS nicht dynamisch nachlädt wenn du dein Fenster skalierst. Somit muss die Überprüfung auf die Fenster grösse schon beim Laden der Seite passieren. Folglich würde ich den Code anpassen und in die Standart jQuery start Methode schreiben:

$(document).ready(function () {
    // überprüfung auf Fensterbreite
}

So wird die Prüfung ausgeführt sobald die Seite fertig geladen wurde.

Die Fehlermeldung welche du in der Konsole bekommst, wird ja durch die jquery.js erzeugt. Ich gehe mal stark davon aus, dass das die jQuery library ist. Somit ist diese beschädigt. Lade dir am besten die neuste version erneut herunter: https://code.jquery.com/jquery-3.0.0.js

Und nochmal: Ich empfehle dir echt sowas in CSS umzusetzen. Ich weiss ja nicht genau was diese Zuweisung der href-Atribute bezwecken soll (also wo die links hinführen). Aber vielleicht gibts dafür wirklich eine einfachere Methode.

LG Scrummer

Kommentar von abbrechen ,

Die Gestaltung ist auch mit css umgesetzt. Mir geht es um eine Verlinkung, die sich mit der Bildschirmbreite verändert, das lässt sich mit css leider nicht ändern.
Die document.ready Abfrage habe ich drin, hatte ich der Selbstverständlichkeit halber aber hier nicht reinkopiert.
Die jQuery Datei liegt bei mir nicht lokal, sondern habe den Link von Microsoft. http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js

Kommentar von abbrechen ,

Die href Links führen in eine Stelle im Onepager.
a href=#bratwurst"

// Inhalt

div name="bratwurst"

--> Man wird beim Klick auf den Anchor mit dem Link #bratwurst zu dem Punkt im DOM geschickt, wo name="bratwurst" steht.
Genau diese Methode möchte ich im Responsive ändern.
Über 980px Breite soll #programm der href Link sein und unter 980px soll keine Verlinkung vorhanden sein, es soll sich nur das Submenü öffnen.
Soweit hat es geklappt, aber das Submenü übernimmt bei der unter 980px Bestimmung die Verlinkung des Eltern.

Antwort
von abbrechen, 19

Ergänzend: Beim Submenü erweitert sich die url nicht in der hover-Vorschau, nicht aber beim Klick in der Adressleiste.

Keine passende Antwort gefunden?

Fragen Sie die Community