HTML5嵌套可點擊元素

基於解答的其他問題，即Link inside a button not working in Firefox，HTML5不允許在<button><a>和<a><a>等我有一個設計（無回送允許的），其具有該開關的內容3個可點擊選項卡行顯示 - 當其中兩個活動時，兩端都有兩個箭頭分頁。快速樣機： HTML5嵌套可點擊元素

如何使用正確的HTML5標記和正確的交互式元素嵌套可點擊目標？

有很多方法可以製作，例如，<div>可點擊。我在問一個HTML5解決方案，而不是JS黑客。

來源

2017-03-02 Iiridayn

請提供樣機作爲問題本身的圖像。在第三方網站上（特別是，看起來，模型將在一定時間內被刪除）使得這個問題對其他人來說不那麼有價值。但無論如何，這個問題太廣泛了，有很多方法可以做到這一點，任何標記的語義在很大程度上都是主觀的。 –

我會做的是將標籤作爲無序列表的一部分，每個列表中都有<a>標籤。對於需要箭頭的人員，請在<li>內包含其他<a>標記，並使用CSS將它們放置在主要的<a>之上。

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>

來源

2017-03-02 22:30:52 Gwellin

比我想出的任何東西都好，謝謝。 – Iiridayn

一個可能的解決方案 - <label>是一個交互式標籤，它明確允許交互式內容（用於表單元素）。 <label>可以設置一個隱藏的無線電元素的值，可以通過CSS或JS使用隱藏的無線電元素來選擇要顯示的標籤內容，同時（可能）允許將嵌套的<a>標籤內置爲prev/next。

來源

2017-03-02 22:09:47 Iiridayn

HTML5嵌套可點擊元素

回答

相關問題