CSS實現Tab頁切換效果非常常見，下面介紹一種基于CSS樣式的實現方式。

實現效果：點擊Tab標簽切換當前內容顯示，同時切換Tab標簽樣式。

HTML部分：
<div class="tab-container">
<span class="tab active" data-tab="tab-1">Tab 1</span>
<span class="tab" data-tab="tab-2">Tab 2</span>
<span class="tab" data-tab="tab-3">Tab 3</span>
<div id="tab-1" class="tab-content show">
<p>這是Tab 1的內容</p>
</div>
<div id="tab-2" class="tab-content">
<p>這是Tab 2的內容</p>
</div>
<div id="tab-3" class="tab-content">
<p>這是Tab 3的內容</p>
</div>
</div>

HTML部分包括三個Tab標簽和對應的內容區域，每個標簽通過data-tab屬性綁定對應的內容區域。

CSS部分：
.tab-container {
display: flex;
justify-content: center;
align-items: center;
}
.tab {
margin-right: 20px;
padding: 10px;
border: 1px solid #ccc;
border-bottom: none;
cursor: pointer;
}
.tab.active {
border-color: #000;
background-color: #fff;
}
.tab-content {
display: none;
padding: 20px;
border: 1px solid #ccc;
}
.tab-content.show {
display: block;
}

CSS部分設置Tab標簽和內容區域的樣式，其中.tab.active類表示當前選中的標簽樣式。

JavaScript部分：
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const tabContent = document.getElementById(tab.dataset.tab);
const activeTab = document.querySelector('.tab.active');
const activeTabContent = document.querySelector('.tab-content.show');
activeTab.classList.remove('active');
tab.classList.add('active');
activeTabContent.classList.remove('show');
tabContent.classList.add('show');
});
});

JavaScript部分監聽每個Tab標簽的點擊事件，獲取對應的內容區域并切換顯示，同時更新當前Tab標簽的樣式。