it-swarm.com.de

Kann ich ein <button> -Element in einem <a> mit HTML5 verschachteln?

Ich mache folgendes:

 <a href="www.stackoverflow.com">
   <button disabled="disabled" >ABC</button>
 </a>  

Das funktioniert gut, aber ich erhalte einen HTML5-Überprüfungsfehler, der besagt, dass "Element" button "nicht in Element" a button "verschachtelt sein darf.

Kann mir jemand einen Rat geben, was ich tun soll?

109
Marie

Nein, es ist kein gültiges HTML5 gemäß dem HTML5-Spezifikationsdokument von W3C :

Inhaltsmodell:Transparent , es darf jedoch kein interaktiver Inhalt Nachkomme sein.

Das a-Element kann um ganze Absätze, Listen, Tabellen usw., sogar ganze Abschnitte, gelegt werden, solange sich darin kein interaktiver Inhalt befindet (z. B. Schaltflächen oder andere Links).

Mit anderen Worten, Sie können beliebige Elemente in einem <a> verschachteln, mit Ausnahme der folgenden:

  • <a>

  • <audio> (wenn das Steuerelemente Attribut vorhanden ist)

  • <button>

  • <details>

  • <embed>

  • <iframe>

  • <img> (wenn das usemap Attribut vorhanden ist)

  • <input> (wenn das type Attribut nicht im ausgeblendet Zustand ist

  • <keygen>

  • <label>

  • <menu> (wenn das type Attribut sich im Symbolleiste Zustand befindet

  • <object> (wenn das usemap Attribut vorhanden ist)

  • <select>

  • <textarea>

  • <video> (wenn das Steuerelemente Attribut vorhanden ist) 


Wenn Sie versuchen, eine Schaltfläche zu haben, die auf irgendwo verweist, wickeln Sie diese Schaltfläche in ein <form>-Tag ein:

<form style="display: inline" action="http://example.com/" method="get">
  <button>Visit Website</button>
</form>

Wenn Ihr <button>-Tag jedoch mit CSS gestaltet ist und nicht wie das Widget des Systems aussieht ... Machen Sie sich selbst einen Gefallen, erstellen Sie eine neue Klasse für Ihr <a>-Tag und gestalten Sie es auf dieselbe Weise.

186
Andrew Moore

Wenn Sie Bootstrap 3 verwenden, funktioniert das ziemlich gut

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
37
user2197018

Ich bin gerade in das gleiche Thema gesprungen und habe es gelöst, indem ich das 'button' -Tag durch das 'span' -Tag ersetzt. In meinem Fall verwende ich Bootstrap. So sieht es aus:

<a href="#register"> 
    <span class="btn btn-default btn-lg">
        Subscribe
    </span>
</a> 
9
gobeltri

Nein.

Die folgende Lösung basiert auf JavaScript.

<button type="button" onclick="location.href='http://www.stackoverflow.com'">ABC</button>

Wenn die Schaltfläche mit <form> in einem vorhandenen method="post" platziert werden soll, müssen Sie sicherstellen, dass die Schaltfläche das Attribut type="button" enthält. Andernfalls wird die Schaltfläche POST von der Schaltfläche übergeben. Auf diese Weise können Sie einen <form> haben, der eine Mischung aus GET- und POST - Bedientasten enthält.

8
Peter Wilson

Es wäre wirklich komisch, wenn das gültig wäre, und ich würde erwarten, dass es ungültig ist. Was bedeutet es, ein anklickbares Element in einem anderen anklickbaren Element zu haben? Welches ist es - ein Button oder ein Link?

7
Steve Jorgensen

Selbst wenn die Spezifikation dies nicht zulässt, "scheint" es in diesen Tagen immer noch zu funktionieren, um die Schaltfläche in ein <a href...><button ...></a>-Tag einzubetten, FWIW ...

2
rogerdpack

Eine weitere Option ist die Verwendung des Onclick-Attributs der Schaltfläche:

<button disabled="disabled" onClick="location.href='www.stackoverflow.com'" >ABC</button>

Dies funktioniert, der Benutzer wird den Link jedoch nicht so sehen, wie er sich innerhalb des Elements befinden würde.

2
LaserCat

warum nicht..Sie können auch ein Bild auf der Schaltfläche einbetten

<FORM method = "POST" action = "https://stackoverflow.com"> 
    <button type="submit" name="Submit">
        <img src="img/Att_hack.png" alt="Text">
    </button>
</FORM> 
0

Erklärung und funktionierende Lösung hier: Howto: div mit onclick in ein anderes div mit onclick javascript

indem Sie dieses Skript in Ihrem inneren Klick-Handler ausführen:

 if (!e) var e = window.event;
 e.cancelBubble = true;
 if (e.stopPropagation) e.stopPropagation();
0
Ruwen

Sie können der Schaltfläche eine Klasse hinzufügen und ein Skript zur Weiterleitung hinzufügen.

Ich mache es so:

<button class='buttonClass'>button name</button>

<script>
$(".buttonClass').click(function(){
window.location.href = "http://stackoverflow.com";
});
</script>
0
divHelper11