CSS 地圖選項卡是一種流行的網頁設計技術，可用于顯示各種類型的內容，包括站點導航、圖形和其他信息。這項技術使用 CSS 樣式表來定義和修改選項卡和相關元素的外觀和布局。

.tab {
padding: 10px;
margin-top: 10px;
border: 1px solid #ccc;
border-bottom: none;
}
.tab.active {
background-color: #f2f2f2;
border-color: #ddd;
border-bottom-color: transparent;
}
.tab-container {
border: 1px solid #ccc;
padding: 10px;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}

在上面的樣式表中，我們定義了兩個 CSS 類：.tab 和 .tab-container。.tab 類用于定義選項卡的外觀和布局，而.tab-container 類用于定義選項卡內容的外觀和布局。

為了使選項卡可訪問，每個選項卡都應該使用<a>元素，并使用 href 屬性將其鏈接到相關的內容區域。選項卡應該擁有相同的 CSS 類（例如 .tab）以實現相同的樣式。

最后，我們需要一些 JavaScript 代碼來激活選項卡。這段代碼應該監聽選項卡上的單擊事件，并根據選擇的選項卡顯示相應的內容區域。

const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-content');
tabs.forEach((tab, index) =>{
tab.addEventListener('click', () =>{
tabs.forEach((tab) =>{
tab.classList.remove('active');
});
tab.classList.add('active');
tabContents.forEach((content) =>{
content.classList.remove('active');
});
tabContents[index].classList.add('active');
});
});

上面的代碼使我們通過 CSS 類連接選項卡和相關內容，并在單擊選項卡時顯示相應的內容區域。

這是一個基本的 CSS 地圖選項卡示例，你可以根據需要添加更多的樣式和選項卡。