HTML 中的巢狀連結：允許還是不允許？

巢狀連結：允許還是禁止？

在Web 開發中，出現一個常見問題：是否允許在另一個連結中嵌套一個連結?

W3C HTML4立場

根據W3C HTML4 準則，禁止巢狀連結。 A 元素不能包含任何其他 A 元素。

HTML5 的視角

在 HTML5 中，規則略有演變。雖然仍然不允許嵌套鏈接，但有一個新的限制：包含錨標記（A 元素）的互動式內容不能放置在 A 元素內。

最佳實務

儘管有這些限制，某些佈局可能需要包含多個可點擊的可點擊區域

替代方法

• 使用CSS：將可點選區域指派給父元素並使用CSS設定適當連結的樣式行為。
• 使用 JavaScript： 使用事件用於捕獲點擊並根據目標元素確定預期操作的處理程序。

範例

考慮給定的程式碼片段：

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

要讓整個灰色條可點擊，可以將點擊事件處理程序分配給父級；元素並使用jQuery，如下所示：

$('.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
  }
});

以上是HTML 中的巢狀連結：允許還是不允許？的詳細內容。更多資訊請關注PHP中文網其他相關文章！