Verschachtelte Links in HTML: Erlaubt oder nicht?

Verschachtelung von Links: Erlaubt oder verboten?

Bei der Webentwicklung stellt sich häufig die Frage: Ist es zulässig, einen Link in einem anderen Link zu verschachteln? ?

W3C HTML4's Haltung

Gemäß den HTML4-Richtlinien des W3C ist das Verschachteln von Links verboten. Das A-Element darf keine anderen A-Elemente enthalten.

Die Perspektive von HTML5

In HTML5 haben sich die Regeln leicht weiterentwickelt. Während das Verschachteln von Links weiterhin nicht zulässig ist, gibt es eine neue Einschränkung: Interaktive Inhalte, die Ankertags (A-Elemente) enthalten, können nicht in einem A-Element platziert werden.

Best Practices

Trotz dieser Einschränkungen erfordern bestimmte Layouts möglicherweise einen anklickbaren Bereich, der mehrere anklickbare Elemente umfasst.

Alternative Ansätze

• Verwendung von CSS: Weisen Sie den anklickbaren Bereich einem übergeordneten Element zu und verwenden Sie CSS, um das entsprechende Linkverhalten zu gestalten.
• Verwendung JavaScript: Verwenden Sie Event-Handler, um Klicks zu erfassen und die beabsichtigte Aktion basierend auf dem Ziel zu bestimmen Element.

Beispiel

Beachten Sie den angegebenen Codeausschnitt:

<a href="#" class="sp_mngt_bar">
    <h1><?php echo $v; ?></h1>
    <a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a>
    <a href="#" class="t_icons t_icons_move sp_mngt_move"></a>
</a>

Um die gesamte graue Leiste anklickbar zu machen, können Sie zuweisen Der Click-Event-Handler zum übergeordneten Element und verwenden Sie jQuery wie folgt:

$('.sp_mngt_bar').click(function(e) {
  if (e.target.className.indexOf('sp_mngt_move') > -1) {
    // Handle move icon click
  } else if (e.target.className.indexOf('sp_mngt_settings') > -1) {
    // Handle settings icon click
  } else {
    // Handle main link click
  }
});

Das obige ist der detaillierte Inhalt vonVerschachtelte Links in HTML: Erlaubt oder nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!