target 進階：頁籤切換顯示內容

target 是一個虛擬類別選擇器，用途在於讓我們設定目標對象的樣式。

CSS 的寫法為：

選擇器：target{
	.....
}

也就是當有人點了錨點為 hello 的 a 連結，則透過 #hello:target{……..} 就可以改變 id 為 hello 的 HTML 元素樣式。

在這個範例中必須懂的知識點：

• 選取 [ 擁有特定屬性 ]的選擇器
  img[alt] {……..} 為改變有 alt 屬性的圖片樣式。
• 選取對象A ~ 選取對象B：意指選到 A 後面所有同一層的 B
• 選取對象A > 選取對象B：意指僅選到 A 的下一層的 B

第一步：設定 HTML 結構，「頁籤按鈕」與「內容」連動

1. 點選 <li><a href="#tab-1">Tab 1</a></li> 標籤來觸發 <span id="tab-1">1</span>
2. <span id="tab-1">1</span> 利用 :target 反過來改變 <li><a href="#tab-1">Tab 1</a></li>與 <div class="tab-content-1"><p>內容-1</p></div> 的樣式。

HTML 結構如下：

<span id="tab-1">1</span>
<span id="tab-2">2</span>
<span id="tab-3">3</span>
<span id="tab-4">4</span>
<div id="tab">
<!– 頁籤按鈕 –>
<ul>
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
<li><a href="#tab-4">Tab 4</a></li>
</ul>
<!– 頁籤的內容區塊 –>
<div class="tab-content-1"><p>內容-1</p></div>
<div class="tab-content-2"><p>內容-2</p></div>
<div class="tab-content-3"><p>內容-3</p></div>
<div class="tab-content-4"><p>內容-4</p></div>
</div>

CSS 結構如下：

/* span:target */
#tab-1:target,
#tab-2:target,
#tab-3:target,
#tab-4:target{
border: solid 1px red;
}
/* /頁籤變換 選到 #tab-1 後面 #tab 後面 ul li a標籤屬性為 "#tab-x"的元素/ */
#tab-1:target ~ #tab > ul li a[href$="#tab-1"],
#tab-2:target ~ #tab > ul li a[href$="#tab-2"],
#tab-3:target ~ #tab > ul li a[href$="#tab-3"],
#tab-4:target ~ #tab > ul li a[href$="#tab-4"] {
border: solid 1px blue;
}

/* /頁籤內容顯示 / */
#tab-1:target ~ #tab > div.tab-content-1,
#tab-2:target ~ #tab > div.tab-content-2,
#tab-3:target ~ #tab > div.tab-content-3,
#tab-4:target ~ #tab > div.tab-content-4 {
border: solid 1px black;
}

/* 頁籤的樣式設定 */
#tab{
width: 300px;
background: lightblue;
border: solid 4px pink;
}

/* 頁籤ul */
#tab>ul{
overflow: hidden;
margin: 0;
padding: 10px 20px 0 20px;
}

#tab>ul>li{
list-style-type: none;
}

/* 設定頁籤內的樣式 */
#tab>ul>li>a{
text-decoration: none;
font-size: 13px;
color: #333;
float: left;
padding: 10px;
margin-left: 5px;
}

第二步：設定隱藏與切換顯示

1. 設定所有內容區塊為隱藏。
2. 設定初始的時候 tab1 為啟動狀態，而 內容-1 為顯示狀態。
3. 設定點選其他標籤時切換內容

/* span:target */
#tab-1:target,
#tab-2:target,
#tab-3:target,
#tab-4:target{
border: solid 1px red;
}
/* /頁籤變換 選到 #tab-1 後面 #tab 後面 ul li a標籤屬性為 "#tab-x"的元素/ */
#tab-1:target ~ #tab > ul li a[href$="#tab-1"],
#tab-2:target ~ #tab > ul li a[href$="#tab-2"],
#tab-3:target ~ #tab > ul li a[href$="#tab-3"],
#tab-4:target ~ #tab > ul li a[href$="#tab-4"] {
border: solid 1px blue;
}

/* /頁籤內容顯示 / */
#tab-1:target ~ #tab > div.tab-content-1,
#tab-2:target ~ #tab > div.tab-content-2,
#tab-3:target ~ #tab > div.tab-content-3,
#tab-4:target ~ #tab > div.tab-content-4 {
border: solid 1px black;
}

#tab{
width: 300px;
background: lightblue;
border: solid 4px pink;
}

/* 頁籤ul */
#tab>ul{
overflow: hidden;
margin: 0;
padding: 10px 20px 0 20px;
}

#tab>ul>li{
list-style-type: none;
}

/* 設定頁籤內的樣式 */
#tab>ul>li>a{
text-decoration: none;
font-size: 13px;
color: #333;
float: left;
padding: 10px;
margin-left: 5px;
}

/* 第二步由此開始 */
/* /所有內容區塊隱藏起來/ */
#tab>div {
clear:both;
padding:0 15px;
height:0;
overflow:hidden;
visibility:hidden;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
}

/* /第一筆的底色，點擊tab1以外的標籤會變色/ */
span:target ~ #tab > ul li:first-child a {
background:red;
}

/* :first-of-type 代表本節點為兄弟節點中第一個此類型節點。 點擊tab1以外其他標籤內容-1隱藏 */
span:target ~ #tab > div:first-of-type {
visibility:hidden;
height:0px;
  background: purple;
padding:0 15px;
}

/* /頁籤:點擊變換&第一筆還未點擊的初始化樣式/ */
/* 下面的是點擊才會變色 */
span ~ #tab > ul li:first-child a,
#tab-1:target ~ #tab > ul li a[href$="#tab-1"],
#tab-2:target ~ #tab > ul li a[href$="#tab-2"],
#tab-3:target ~ #tab > ul li a[href$="#tab-3"],
#tab-4:target ~ #tab > ul li a[href$="#tab-4"] {
background: #fff;
} 

/* /頁籤內容顯示&設定第一筆為顯示/ */
span ~ #tab > div:first-of-type,
#tab-1:target ~ #tab > div.tab-content-1,
#tab-2:target ~ #tab > div.tab-content-2,
#tab-3:target ~ #tab > div.tab-content-3,
#tab-4:target ~ #tab > div.tab-content-4 {
visibility:visible;
height:200px;
background: #fff;
}

最後記得把 <span> 設為 display:none