這個純粹的CSS選項卡是如何工作的？

Question

跨越這個剛剛來到克里斯Coyier - http://css-tricks.com/examples/CSSTabs/

任何人都可以解釋我，如何在類的.cur得到應用到標籤的標題，當我們點擊它？裏面沒有js。

Answer 1

它依賴於CSS3選擇器：target。目標是針對html頁面中的部分，如http://www.example.com/page#section（SO使用它們跳轉到特定答案）。

當目標被選中時，目標僞類接管。

這裏使用z-index技巧來將各部分上下推送。

這是它的一般要旨，我不知道具體情況。

編輯 -

「cur」類完全不適用。在右側，每個「窗格」中都定義了所有三個選項卡，但每個窗格的「cur」類都是「硬編碼的」。 z-indexing會將整個窗格及其製表符帶到頂部，從而創建效果。實際上，它只是3格的HTML。

所以這裏沒有魔法（超越整個：目標僞類）。