CSS 可以幫助我們實現(xiàn)許多神奇的效果，比如點擊后切換顯示區(qū)域。這個效果就是通過使用 CSS 的:target偽類來實現(xiàn)的。具體實現(xiàn)方法如下：

<div class="tab-group">
<a href="#tab1">Tab 1</a>
<a href="#tab2">Tab 2</a>
<a href="#tab3">Tab 3</a>
</div>
<div class="tab">
<div id="tab1">
<h2>Tab 1 Content</h2>
<p>This is the content of tab 1.</p>
</div>
<div id="tab2">
<h2>Tab 2 Content</h2>
<p>This is the content of tab 2.</p>
</div>
<div id="tab3">
<h2>Tab 3 Content</h2>
<p>This is the content of tab 3.</p>
</div>
</div>

首先，我們需要創(chuàng)建一個包含所有選項卡鏈接的 div 元素，并添加一個唯一的 id 名稱（比如 “tab-group”）。

然后，我們需要創(chuàng)建一個包含所有選項卡內(nèi)容的 div 元素，并添加唯一的 id 名稱（比如 “tab”），這些內(nèi)容對應著之前創(chuàng)建的鏈接。

接下來，我們需要使用 CSS 來隱藏所有選項卡內(nèi)容，除了當前激活的選項卡對應的內(nèi)容。代碼如下：

.tab {
display: none;
}
.tab:target {
display: block;
}

最后，我們需要使用 CSS 定義選項卡鏈接的樣式，以及當前激活鏈接的樣式。代碼如下：

.tab-group a {
display: inline-block;
padding: 10px;
background-color: #eee;
color: #333;
text-decoration: none;
border-radius: 5px 5px 0 0;
}
.tab-group a:target {
background-color: #fff;
color: #333;
border-bottom: solid 2px #333;
}

現(xiàn)在，我們就可以通過點擊選項卡鏈接來切換顯示對應的選項卡內(nèi)容了。