在網頁設計中，當我們需要製作一個包含「查看更多」按鈕的簡單著陸頁時，直覺反應往往是使用 JavaScript 來處理按鈕的點擊事件。但您知道嗎?其實單純使用 CSS 就能完成這項任務。

CSS 點擊處理器：您可能未曾使用但值得一試的技巧

:target 偽類選擇器的奧妙

CSS 提供了多種可根據不同狀態來設計元素樣式的偽類選擇器(如 :hover、:focus、:checked 等)。其中，:target 這個較少被使用的偽類選擇器特別實用。

當 URL 中的片段標識符(# 號後的部分)與某個元素的 ID 相符時，:target 就會觸發並應用相應的樣式。這種行為常見於點擊頁內錨點連結時。

實作無 JavaScript 的點擊處理器

以下是一個簡單的示範：

html
<a href="#details">查看更多</a>
<section id="details">
  <p>這是隱藏的內容!</p>
</section>

css
#details {
  display: none;
}
#details:target {
  display: block;
}

關閉按鈕的實作

若要實現內容的切換顯示效果，我們可以加入一個關閉按鈕：

html
<a href="#details">查看更多</a>
<section id="details">
  <p>這是隱藏的內容!</p>
  <a href="#">隱藏</a>
</section>

當點擊「隱藏」按鈕時，URL 會回到 #，使 #details 不再是目標元素，內容便會隱藏起來。這個隱藏的實作方式非常簡單且直觀。

實用場景

在網頁設計中，這項技術可應用於：

1. 行動版選單
2. 彈出視窗
3. 分頁導航

瀏覽器支援與限制

優點：

• 支援度高，主流瀏覽器均可使用
• 實作簡單，程式碼精簡
• 提升網頁效能

限制：

• 與 URL 綁定，返回頁面時可能保持顯示狀態
• 隱藏時無法使用動畫效果
• 不適合複雜的互動需求

CSS :target 進階應用技巧

1. 圖片展示廊（Image Gallery）

html
<div class="gallery">
  <a href="#img1"><img src="thumb1.jpg" alt="縮圖1"></a>
  <a href="#img2"><img src="thumb2.jpg" alt="縮圖2"></a>
   <div id="img1" class="lightbox">
    <a href="#" class="close">×</a>
    <img src="large1.jpg" alt="大圖1">
  </div>
   <div id="img2" class="lightbox">
    <a href="#" class="close">×</a>
    <img src="large2.jpg" alt="大圖2">
  </div>
</div>

css
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
}

.lightbox:target {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. 手風琴選單（Accordion Menu）

html
<div class="accordion">
  <a href="#section1">章節一</a>
  <div id="section1" class="content">
    <p>章節一的內容</p>
    <a href="#" class="close">收合</a>
  </div>
   <a href="#section2">章節二</a>
  <div id="section2" class="content">
    <p>章節二的內容</p>
    <a href="#" class="close">收合</a>
  </div>
</div>

css
.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.content:target {
  max-height: 500px;
}

3. 多層次導航選單

html
<nav class="multilevel-menu">
  <a href="#menu1">選單1</a>
  <div id="menu1" class="submenu">
    <a href="#submenu1">子選單1</a>
    <div id="submenu1" class="sub-content">
      <p>子選單1內容</p>
      <a href="#">返回</a>
    </div>
  </div>
</nav>

css
.submenu,
.sub-content {
  display: none;
  position: absolute;
}

.submenu:target,
.sub-content:target {
  display: block;
}

4. 互動式卡片翻轉效果

html
<div class="card-container">
  <a href="#card1">查看詳情</a>
  <div id="card1" class="card">
    <div class="card-front">正面內容</div>
    <div class="card-back">
      背面內容
      <a href="#">返回</a>
    </div>
  </div>
</div>

css
.card {
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.card:target {
  transform: rotateY(180deg);
}

.card-back {
  transform: rotateY(180deg);
}

5. 全螢幕導覽列

html
<a href="#fullnav" class="menu-toggle">☰</a>
<nav id="fullnav" class="fullscreen-nav">
  <a href="#" class="close">×</a>
  <ul>
    <li><a href="#">首頁</a></li>
    <li><a href="#">關於我們</a></li>
    <li><a href="#">服務項目</a></li>
    <li><a href="#">聯絡資訊</a></li>
  </ul>
</nav>

css
.fullscreen-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
}

.fullscreen-nav:target {
  display: flex;
  justify-content: center;
  align-items: center;
}

效能優化建議

1. 使用 transform 和 opacity 來製作動畫，避免使用影響排版的屬性
2. 設定適當的 z-index 管理層級
3. 使用 will-change 屬性提示瀏覽器優化渲染
4. 考慮使用 CSS Grid 或 Flexbox 來優化佈局

輔助功能（Accessibility）考量

1. 確保所有互動元素可通過鍵盤操作
2. 添加適當的 ARIA 標籤
3. 提供明確的視覺反饋
4. 考慮使用者的閱讀順序

:target 選擇器雖然簡單，但搭配現代 CSS 特性可以創造出豐富的互動效果。在開發時，記得考慮效能優化和無障礙訪問，讓網站更加完善。