Verpackung DIV in Anker-Tags oder sonst

Angenommen ich habe einen anklickbaren komplexe div - element-Struktur, die links zu einer anderen Seite wie folgt. Dies ist die Sache, die erreicht wird, die sich derzeit auf klicken Sie auf.
Auf klicken (css :active-Zustand) ändern der hintergrund-Farbe innen <a> tag und leitet Sie zur anderen Seite.

Frage ich mich, ob diese entspricht der HTML5-Validierung oder betrachten Sie als "best practice" im Vergleich zu umwickeln Sie es mit einem div und Verwendung von JavaScript zum verwalten der link umleiten und Hintergrundfarbe ändern klicken.

Mir, der erste Ansatz scheint zu sein, viel sauberer und geradlinig.

Ich glaube, dies ist ein häufiges Problem, mit dem Gesicht durch eine Menge von web-Entwicklern, aber ich bin nicht sicher, ob es eine bereits vorhandene best-practice-Lösung für dieses.

1) Pflegen, wie dies

<a href="page1.html">
    <div>
        <!-- complex layout -->
    </div>
</a>

2) Weglassen der <a> tag und zu verwalten hintergrund-Farbe bei click-Ereignis, Weiterleitung per JavaScript

<div id="#redirectLink" data-link="page1.html">
    <!-- complex layout -->
</div>
  • Sie tun kann window.location="some_Website_link"auf onClick
  • Abgesehen vom reinen HTML5 Gültigkeit, würde ich gehen für CSS nur über Javascript jeden Tag, sowohl für performance-und Kompatibilitätsgründen (falls jemand hat Javascript deaktiviert oder benutzt ein system, das nicht unterstützt wird). Javascript behandeln soll, die Funktionalität, während CSS sollte die visuelle Gestaltung. Ihre source-code sehr viel besser lesbar, die hauptsächlich davon profitieren Ihr. Auch Raupen werden in der Lage sein, zu analysieren, Ihrer Seite für hyperlinks.
  • (•_•) @TheThirdMan zitiert Ihren Kommentar "I'd go for CSS-only over Javascript any day" ... was? "Also, crawlers will be able to analyze your page for hyperlinks" huh? Kannst du bitte ein Beispiel zeigen, wo man verwenden von CSS-only konvertieren kann, dass ein element einen link?
  • Es war schlecht formuliert-auf mein Ende - was ich meinte war die Verwendung von reinem CSS zu ändern, ein element, das Aussehen, anstatt javascript zu tun, basierend auf einem einfachen HTML-Konstrukt mit Hilfe des a-Tags. CSS-und JS annehmen bzw. konstruiert markup für Sie zu arbeiten, so war ich weglassen, dass in meiner vorherigen Beschreibung.
InformationsquelleAutor stackdisplay | 2016-05-10
  1. 10

    HTML5, Sie kann wickeln DIV innerhalb einer A Anker

    <a href="page1.html">
    <div>
        <!-- complex layout - WITHOUT ANCHORS OR BUTTONS -->
    </div>
</a>

    nur, wenn innen <!-- complex layout --> Sie haben keine andere <a> oder Form-action-Elemente wie <button> etc.

    Ansonsten können Sie tun:

    <div id="#redirectLink" data-link="page1.html">
    <!-- complex layout -->
</div>

<script>
document.querySelectorAll("[data-link]").forEach( el =>  {
   el.addEventListener("click", () => window.location.href = el.dataset.link);
});
</script>

    oder einfach:

    <div id="#redirectLink" onclick="window.location.href='page1.html';">
    <!-- complex layout -->
</div>

    aber inline-JavaScript ist schlechtes design, da schwer zu warten und zu Debuggen, also lieber wenn es in Ihrem Skript-Dateien.

    InformationsquelleAutor Roko C. Buljan
  2. 0

    Ihre erste Ansatz entspricht HTML5. a-tags können Kinder haben, nur nicht mehr links.

    Ist es legal, Kinder zu haben, einen Anker-tag (<a>) in HTML?

    InformationsquelleAutor Taruc
Schreibe einen Kommentar