CSS點擊頁面切換是一種常見的網頁設計技巧，可增強用戶體驗，讓網站更加動態(tài)有趣。下面將介紹如何實現此技巧。

HTML代碼：
<div class="tab">
<a href="#tab1">Tab 1</a>
<a href="#tab2">Tab 2</a>
<a href="#tab3">Tab 3</a>
</div>
<div id="tab1">
<h2>Tab 1</h2>
<p>內容1</p>
</div>
<div id="tab2">
<h2>Tab 2</h2>
<p>內容2</p>
</div>
<div id="tab3">
<h2>Tab 3</h2>
<p>內容3</p>
</div>
CSS代碼：
.tab a {
display: inline-block;
padding: 10px;
background-color: #eee;
margin-right: 10px;
color: #333;
text-decoration: none;
border-radius: 5px 5px 0 0;
}
.tab a.active,
.tab a:hover {
background-color: #333;
color: #fff;
}
div[id^="tab"] {
display: none;
}
div[id^="tab"]:target {
display: block;
}

上述代碼中，我們首先創(chuàng)建了一個包含三個選項卡的div（class為“tab”），每個選項卡對應一個鏈接（href）。當用戶點擊鏈接時，會將瀏覽器的URL更改為相應選項卡的ID（即#tab1、#tab2或#tab3），這樣就可以利用CSS的:target偽類來顯示相應選項卡的內容。

我們的CSS代碼有三個部分：

首先，我們設置每個鏈接的樣式，確定它們的大小、顏色、邊框、填充等屬性。我們還使用了border-radius屬性來使它們的上邊緣更加圓潤。

接著，我們?yōu)樗芯哂小癮ctive”類或當前鼠標懸停在其上的鏈接定義了一組樣式。這樣做可以使當前選擇的選項卡鏈接看起來不同于其他鏈接，從而提高用戶體驗。

最后，我們使用[id^="tab"]選擇器來選擇以“tab”作為前綴的所有ID，即我們用于顯示每個選項卡內容的div。我們將它們的display屬性設置為none，以確保它們默認情況下不可見。當選項卡鏈接被單擊時，相應的選項卡ID成為瀏覽器的URL的一部分，我們可以使用:target偽類選擇器來根據ID顯示相應的選項卡內容。

總之，CSS點擊頁面切換是一種簡單而有效的網頁設計技巧，可以通過CSS的:target偽類來實現，提供了出色的用戶體驗，尤其適用于網站的導航欄。