HTML5 geschachtelt klickbare Elemente

Basierend Antworten auf andere Fragen, dh Link inside a button not working in Firefox, nicht zulässt HTML5 <a><a> in <button> und in <a> usw. Ich habe ein Design (kein Push-Back erlaubt), die eine Reihe von drei anklickbare Laschen aufweist, die den Inhalt angezeigt Schalter - Bei zwei von ihnen, wenn aktiv, gibt es zwei Pfeile an jedem Ende, die die Registerkarte paginieren. Schnelles Mockup: HTML5 geschachtelt klickbare Elemente

Wie kann ich anklickbare Ziele mit dem richtigen HTML5-Markup und geeigneten interaktiven Elementen verschachteln?

Es gibt viele Möglichkeiten, zum Beispiel <div> s klickbar zu machen. Ich frage nach einer HTML5-Lösung, nicht nach einem JS-Hack.

Quelle

2017-03-02 Iiridayn

Bitte geben Sie die Attrappe als ein Bild in der Frage selbst. Wenn Sie das auf einer Website eines Drittanbieters haben (insbesondere, wie es scheint, wird das Modell in einer bestimmten Zeit gelöscht), wird diese Frage für andere weniger wertvoll. Aber auf jeden Fall ist das eine viel zu weit gefasste Frage; Es gibt viele Möglichkeiten, dies zu tun, und die Semantik eines Markups ist weitgehend subjektiv. –

Was ich tun würde, ist die Registerkarten als Teil einer ungeordneten Liste mit jeweils <a> Tags innerhalb haben. Für die Pfeile benötigen Sie zusätzliche <a> Tags innerhalb der <li>, und verwenden Sie CSS, um sie über dem primären <a> zu positionieren.

ul { 
 
    line-height: 2em; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: block; 
 
} 
 
ul > li { 
 
    position: relative; 
 
    width: 10em; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: inline-block; 
 
} 
 
ul > li > a { 
 
    text-decoration: none; 
 
    color: green; 
 
    border: 1px solid green; 
 
    display: block; 
 
} 
 
ul > li > a:hover { 
 
    background-color: lightgrey; 
 
} 
 
ul > li > a.back, ul > li > a.next { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 2em; 
 
    color: darkgreen; 
 
    border-color: darkgreen; 
 
} 
 
ul > li > a.back { 
 
    left: 0; 
 
} 
 
ul > li > a.next { 
 
    right: 0; 
 
}

<ul> 
 
    <li><a href="#tab1">One</a></li> 
 
    <li><a href="#tab2">Two</a><a href="#tab2back" class="back">&lt;</a><a href="#tab2next" class="next">&gt;</a></li> 
 
    <li><a href="#tab3">Three</a></li> 
 
</ul>

Quelle

2017-03-02 22:30:52 Gwellin

Besser als alles, was mir einfällt, danke. – Iiridayn

Eine mögliche Lösung - <label> ist ein interaktives Tag, das ausdrücklich interaktive Inhalte (für Formularelemente) erlaubt. Die <label> könnte Werte eines versteckten Radioelements festlegen, das über CSS oder JS verwendet werden kann, um auszuwählen, welcher Tab-Inhalt angezeigt werden soll, während (möglicherweise) geschachtelte <a> Tags für prev/next zugelassen werden.

Quelle

2017-03-02 22:09:47 Iiridayn

HTML5 geschachtelt klickbare Elemente

Antwort

Verwandte Themen