以下是一個簡單的 JS 實現選項卡的例子：

HTML 代碼：

<div class="tab-container">
<button class="tab" onclick="openTab(event, 'tab1')">選項卡1</button>
<button class="tab" onclick="openTab(event, 'tab2')">選項卡2</button>
<button class="tab" onclick="openTab(event, 'tab3')">選項卡3</button>
<div id="tab1" class="tab-content">
<h3>選項卡 1 內容</h3>
<p>這是選項卡 1 的內容。</p>
</div>
<div id="tab2" class="tab-content">
<h3>選項卡 2 內容</h3>
<p>這是選項卡 2 的內容。</p>
</div>
<div id="tab3" class="tab-content">
<h3>選項卡 3 內容</h3>
<p>這是選項卡 3 的內容。</p>
</div>
</div>

CSS 代碼：

.tab-container {
max-width: 600px;
margin: 0 auto;
}
.tab {
background-color: #f1f1f1;
border: none;
color: black;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 4px 4px 0 0;
cursor: pointer;
}
.tab:hover {
background-color: #ddd;
}
.tab-content {
display: none;
padding: 20px;
border: 1px solid #ddd;
border-top: none;
}
.tab-content h3 {
margin-top: 0;
}
.tab-content p {
margin-bottom: 0;
}

JS 代碼：

function openTab(event, tabId) {
// 獲取所有的選項卡按鈕和內容
var tabButtons = document.getElementsByClassName('tab');
var tabContents = document.getElementsByClassName('tab-content');
// 隱藏所有的選項卡內容
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].style.display = 'none';
}
// 重置所有選項卡按鈕的樣式
for (var i = 0; i < tabButtons.length; i++) {
tabButtons[i].className = tabButtons[i].className.replace(' active', '');
}
// 顯示當前選項卡內容
document.getElementById(tabId).style.display = 'block';
// 添加 active 類到當前選項卡按鈕
event.currentTarget.className += ' active';
}

這個例子中，我們使用了一個 openTab 函數來控制選項卡的切換。當用戶點擊選項卡按鈕時，會調用這個函數，并傳遞事件對象和選項卡的 ID。函數會首先隱藏所有的選項卡內容，然后顯示當前選項卡的內容。同時，它還會重置所有選項卡按鈕的樣式，并為當前選項卡按鈕添加 active 類，以突出顯示當前選項卡。

最后，我們使用 CSS 來設置選項卡和選項卡內容的樣式。

你可以將以上代碼復制到一個 HTML 文件中并在瀏覽器中運行，以查看效果。