本篇要解決的問題
最近看到 CSS 有一個選擇器--「:target」,他可以針對錨點連結做樣式的改變。在 W3Schools 上的範例是做成頁籤(tabbed menu)、燈箱(modal),不過比較陽春,也沒有預設開啟的設計。
本篇算是對 :target
選擇器的小練習,是真的可以不用寫 JavaScript 就做出頁籤、手風琴這二個功能,但 August 在寫完後,還是覺得用 JS 會比較好,因為有些小地方只靠 CSS 似乎還是無法做到,比方後面會講到的預設只能開啟最後一個而無法預設開啟第一個。
本篇最後完成的 Demo 在這:https://codepen.io/letswrite/pen/poEEYVZ
頁籤 Tab
頁籤分為二部份:頁籤標題、對應的內容區塊。
因為頁籤標題必須要能提示使用者目前開啟的是哪一個,原本 August 是寫成這樣:
// 頁籤標題 a(href="#tab1") Tab1 a(href="#tab2") Tab2 a(href="#tab3") Tab3 // 內容區塊 #tab1.tab__content #tab2.tab__content #tab3.tab__content
但這樣能用 :target
寫到的樣式就只有內容區塊,寫不到標題,後來改成這樣:
// 頁籤標題 #tab1.tab__title a(href="#tab1") Tab1 #tab2.tab__title a(href="#tab2") Tab2 #tab3.tab__title a(href="#tab3") Tab3 // 內容區塊 #tab1.tab__content #tab2.tab__content #tab3.tab__content
但很悲摧的是,id 是唯一值,不能重複,因此最後是改成這樣:
// 頁籤標題 #tab1.tab__title a(href="#tab1") Tab1 #tab2.tab__title a(href="#tab2") Tab2 #tab3.tab__title a(href="#tab3") Tab3 // 內容區塊 .tab__content(data-id="tab1") .tab__content(data-id="tab2") .tab__content(data-id="tab3")
主要就是把內容區塊的 id
改成 data-id="xxx"
,這樣之後寫 CSS 時就可以寫成這樣:
#tab1:target ~ [data-id="tab1"], #tab2:target ~ [data-id="tab2"], #tab3:target ~ [data-id="tab3"] color: white
對,因為只能用 CSS 選擇器,不能用 JS,因此有幾組 Tab 就都要各自寫出來,當然,也可以用 Sass 的 @for
來寫。
~
這個選擇器,就是選「同一層」,a ~ b
就是代表要選擇跟 a
同一層的 b
。
但它只能往後選,不能往前選,比方我們有一段 HTML 是這樣:
p.box.box1 p.ya.box2 p.box.box3
如果我們寫 .ya ~ .box
,能選到的只有 .box3
,選不到 .box1
。
因為這個特性,所以我們寫 Tab 預設打開某一塊內容時,就只能開啟最後一塊,而不能開啟第一塊。
最後,本篇 Demo 頁籤功能的 HTML 如下:
Sass 如下:
手風琴 Collapse
跟頁籤比起來,手風琴要來得比較簡單。
但因為要預設開啟內容區塊一樣是用 ~
選擇器,所以也只能開啟最後一個。
本篇 Demo 手風琴功能的 HTML 如下:
Sass 如下: