純CSS的導航欄Tab切換例項

接下來，我們就可以使用 :target 接受到點選事件，並操作對應的 DOM 了：

#content1,
#content2{
    display:none;
}
 
#content1:target,
#content2:target{
    display:block;
}

上面的 CSS 程式碼，一開始頁面中的 #content1 與 #content2 都是隱藏的，當點選列表1觸發href="#content1" 時，頁面的 URL 會發生變化：

1. 由  變成 #content1

2. 接下來會觸發 #content1:target{ } 這條 CSS 規則，#content1 元素由 display:none 變成display:block ，點選列表2亦是如此。

如此即達到了 Tab 切換。當然除了 content1 content2 的切換，我們的 li 元素樣式也要不斷變化，這個時候，就需要我們在 DOM 結構佈局的時候多留心，在 #content1:target 觸發的時候可以同時去修改 li 的樣式。

在上面 HTML 的基礎上，再修改一下，變成如下結構：

列表1內容:123456
列表2內容:abcdefgkijkl

仔細對比一下與上面結構的異同，這裡我只是將 ul 從兩個 content 上面挪到了下面，為什麼要這樣做呢？

因為這裡需要使用兄弟選擇符 ~ 。

E~F{ cssRules } ，CSS3 兄弟選擇符(E~F) ，選擇 E 元素後面的所有兄弟元素 F。

注意這裡，最重要的一句話是 E~F 只能選擇 E 元素 之後 的 F 元素，所以順序就顯得很重要了。

在這樣調換位置之後，透過兄弟選擇符 ~ 可以操作整個 .nav 的樣式。

#content1:target ~ .nav li{
    // 改變li元素的背景色和字型顏色
    &:first-child{
        background:#ff7300;
        color:#fff;
    }
}
#content2:target ~ .nav li{
    // 改變li元素的背景色和字型顏色
    &:last-child{
        background:#ff7300;
        color:#fff;
    }
}

上面的 CSS 規則中，我們使用 ~ 選擇符，在 #content1:target 和 #content2:target 觸發的時候分別去控制兩個導航 li 元素的樣式。

至此兩個問題，1. 如何接收點選事件 與 2. 如何操作相關DOM 都已經解決，剩下的是一些小樣式的修補工作。

Demo戳我：純CSS導航切換(:target偽類實現)

法二： && 

上面的方法透過新增  標籤新增頁面錨點的方式接收點選事件。

這裡還有一種方式能夠接收到點選事件，就是擁有 checked 屬性的表單元素，  或者 。

假設有這樣的結構：

    
• 列表1

對於上面的結構，當我們點選  單選框表單元素的時候，使用 :checked是可以捕獲到點選事件的。

.nav1:checked ~ .nav li {
  // 進行樣式操作
}

同樣用到了兄弟選擇符 ~

這樣，當接收到表單元素的點選事件時，可以透過兄弟選擇符 ~ 操作它的兄弟元素的樣式。

可以試著點選下面 codepen 中的單選框。

但是，這裡有個問題 我們的 Tab 切換，要點選的是

    
• 列表1

上面的 

label 標籤中的 for 定義：for 屬性規定 label 與哪個表單元素繫結。

這樣改造之後，當我們點選 

這個時候，我們就可以將頁面上的表單元素隱藏，做到點選 

input{
    display:none;
}

這樣，應用到本題目，我們應該建立如下 DOM 結構：

    
    
    

        
列表1
        
列表2
    
    

        
列表1內容:123456
        
列表2內容:abcdefgkijkl
    

使用兩個單選框，分別對應兩個導航選項，運用上面介紹的 label 繫結表單，:checked 接收點選事件，可以得到第二解法。

看看最後的結果：

Demo戳我：純CSS導航切換(label 繫結 input:radio && ~)