it-swarm.com.de

Verknüpfung innerhalb einer Schaltfläche, die in Firefox nicht funktioniert

Ich habe zwei Links innerhalb einer Schaltfläche, aber die Links scheinen bei Firefox nicht zu funktionieren.

<button class="btn login">
    <a href="/login"><b>Log In</b></a> 
          | 
<a href="/signup"><b>Sign Up</b></a>
</button>

Ich habe JavaScript beim Klicken und Weiterleiten versucht - selbst das funktioniert nicht.

29
Stacy J

Das funktioniert nicht, weil von HTML5 nicht erlaubt ist :

Content-Modell: Phrasing-Inhalt, es darf jedoch kein interaktives .__ sein. Inhaltsnachkomme.

Interaktiver Inhalt bedeutet eines der folgenden Elemente :

ein Audio (wenn das Steuerelement-Attribut vorhanden ist) Button-Details einbetten iframe img (wenn das usemap-Attribut vorhanden ist) input (wenn das Attribut type nicht ausgeblendet ist) keygen-Beschriftungsmenü (wenn das Attribut type im Status der Symbolleiste ist) object (wenn das usemap-Attribut ist present) Textarea-Video auswählen (wenn das Steuerelement-Attribut vorhanden ist)

Wenn es in einigen Browsern funktioniert, liegt es einfach daran, dass sie es versuchen Nice mit fehlerhaftem Markup abzuspielen und etwas eine Art aussagekräftiges Ergebnis zu liefern.

Mit anderen Worten: Schreiben Sie Ihren HTML-Code um, es ist ein Durcheinander. Wenn Sie möchten, dass die Links wie in einer Schaltfläche aussehen, setzen Sie sie in ein div-Element und einen Stil, der wie ein Element aussieht, anstatt semantisch falsche Elemente dafür zu missbrauchen.

54

<a> ist innerhalb von <button> nicht erlaubt

Phrasing-Inhalt, es darf jedoch kein Nachkomme für interaktive Inhalte sein.

<a> ist interaktiver Inhalt (unabhängig davon, ob es anscheinend eine href hat, aber Ihre). Daher können Sie sich nicht darauf verlassen, dass die Links als untergeordnete Elemente der Schaltfläche vorhanden sind und was Firefox richtig macht. Verwenden Sie ein anderes Element, um die <a>s zu enthalten

12
Explosion Pills

Ich habe zwei Links in einem Button, aber […]

„Ja, aber lass mich dich dort anhalten…“

http://www.w3.org/TR/html5/forms.html#the-button-element :

4.10.8 Das Schaltflächenelement Inhaltsmodell: Phrasing-Inhalt, es darf jedoch kein interaktiver Inhalt Nachkomme sein.

--->

Interaktiver Inhalt ist ein Inhalt, der speziell für die Benutzerinteraktion gedacht ist . ⇒ a, Audio […]

Wenn Sie also ungültiges HTML schreiben, erwarten Sie unerwartetes Verhalten ;-)

6
CBroe

Sie können dies im Schaltflächenelement hinzufügen. 

onclick = "window.location.href = '/ link1'"

Beispiel

<button onclick="window.location.href='/login'">Login</button>

4
Jeff Zeller

Das ist ungültiges HTML,

Tun Sie stattdessen so etwas:

<ul>
    <li><a href="#">Log in</a></li>
    <li><a href="#">Sign up</a></li>
</ul>
0
Nick R