在前端開發中，HTML Tab切換是一種非常常見的交互方式，它可以實現在同一頁面中切換不同的內容。下面給大家介紹一種常用的HTML Tab切換代碼。 首先，我們需要先定義一個HTML頁面的結構，其中包含一個ul元素和多個div元素。ul元素用于表示Tab的選項卡，而多個div元素則用于表示各個Tab選項卡對應的內容：

<ul id="tabs">
<li class="active" tab="tab1">Tab1</li>
<li tab="tab2">Tab2</li>
<li tab="tab3">Tab3</li>
</ul>
<div id="tab1" class="tabcontent">
<p>這是Tab1的內容</p>
</div>
<div id="tab2" class="tabcontent">
<p>這是Tab2的內容</p>
</div>
<div id="tab3" class="tabcontent">
<p>這是Tab3的內容</p>
</div>

接下來，我們需要編寫一段JavaScript代碼來實現Tab切換的功能。代碼會為每個Tab選項卡添加點擊事件，以便在點擊時切換到對應的內容：

<script>
let tabs = document.querySelectorAll('#tabs li');
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', function() {
let tab = this.getAttribute('tab');
let content = document.querySelectorAll('.tabcontent');
for (let i = 0; i < content.length; i++) {
if (content[i].id === tab) {
content[i].style.display = 'block';
} else {
content[i].style.display = 'none';
}
}
let active = document.querySelector('.active');
active.className = active.className.replace('active', '');
this.className += ' active';
});
}
</script>

以上代碼的作用是獲取所有的Tab選項卡元素，并為它們添加點擊事件。當某個Tab選項卡被點擊時，它對應的內容會被顯示出來，而其他內容則會被隱藏。同時，被選中的Tab選項卡會被添加active的class，以便擁有選中效果。 以上是一個常見的HTML Tab切換的代碼，希望能對大家有所幫助。