<div class="tab-container">
<ul class="tab-list">
<li><a href="#tab1">選項卡1</a></li>
<li><a href="#tab2">選項卡2</a></li>
<li><a href="#tab3">選項卡3</a></li>
</ul>
<div id="tab1">選項卡1內容</div>
<div id="tab2">選項卡2內容</div>
<div id="tab3">選項卡3內容</div>
</div>

接下來使用CSS設置選項卡標簽和內容的樣式，包括設置選項卡標簽的顯示方式、鼠標移動到選項卡標簽上的效果，以及選項卡內容的顯示方式和隱藏方式。

.tab-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.tab-list li {
margin-right: 20px;
padding-bottom: 6px;
border-bottom: 2px solid transparent;
}
.tab-list li a {
display: block;
text-decoration: none;
color: #333;
}
.tab-list li a:hover {
border-bottom: 2px solid #444;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}

最后使用JavaScript實現選項卡切換的功能，當用戶點擊選項卡標簽時，顯示對應的內容div元素，并隱藏其他內容div元素。

const tabs = document.querySelectorAll('.tab-list li');
const contents = document.querySelectorAll('.tab-content');
for (let i = 0; i< tabs.length; i++) {
tabs[i].addEventListener('click', function() {
for (let j = 0; j< tabs.length; j++) {
tabs[j].classList.remove('active');
contents[j].classList.remove('active');
}
this.classList.add('active');
const tabContent = document.querySelector(this.querySelector('a').getAttribute('href'));
tabContent.classList.add('active');
});
}

以上是基于CSS和JavaScript實現HTML選項卡切換的代碼，可以根據實際情況進行修改和擴展。