如何使用Tab切換標(biāo)簽？

在CSS中，我們可以使用Tab鍵來切換標(biāo)簽，我們需要?jiǎng)?chuàng)建一個(gè)包含多個(gè)標(biāo)簽的元素，例如一個(gè)包含多個(gè)選項(xiàng)的表單，我們可以使用CSS的偽類:focus來定位到當(dāng)前獲得焦點(diǎn)的元素，并使用Tab鍵來切換到下一個(gè)元素。

以下是一個(gè)簡(jiǎn)單的示例，展示如何使用CSS和JavaScript來實(shí)現(xiàn)Tab切換標(biāo)簽的功能：

HTML代碼：

<div id="tabs">
  <label for="tab1">標(biāo)簽1</label>
  <input type="text" id="tab1" name="tab1">
  <label for="tab2">標(biāo)簽2</label>
  <input type="text" id="tab2" name="tab2">
  <label for="tab3">標(biāo)簽3</label>
  <input type="text" id="tab3" name="tab3">
</div>

CSS代碼：

#tabs label {
  display: inline-block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #ccc;
  margin-right: -1px; /* 消除標(biāo)簽之間的縫隙 */
}
#tabs label:focus {
  background-color: #eee;
}

JavaScript代碼：

var labels = document.querySelectorAll('#tabs label');
var i = 0;
labels[i].focus(); // 初始聚焦到***個(gè)標(biāo)簽
// 使用Tab鍵切換標(biāo)簽
document.onkeydown = function(event) {
  if (event.key === 'Tab') {
    i = (i + 1) % labels.length; // 計(jì)算下一個(gè)標(biāo)簽的索引
    labels[i].focus(); // 聚焦到下一個(gè)標(biāo)簽
  }
};

在這個(gè)示例中，我們創(chuàng)建了一個(gè)包含三個(gè)標(biāo)簽的元素，并使用CSS的偽類:focus來定位到當(dāng)前獲得焦點(diǎn)的元素，我們使用JavaScript來監(jiān)聽Tab鍵的按下事件，并更新當(dāng)前聚焦的標(biāo)簽，當(dāng)用戶按下Tab鍵時(shí)，JavaScript代碼會(huì)將焦點(diǎn)切換到下一個(gè)標(biāo)簽。