用 CSS :target 製作頁籤、手風琴功能

/

本篇要解決的問題

最近看到 CSS 有一個選擇器--「:target」,他可以針對錨點連結做樣式的改變。在 W3Schools 上的範例是做成頁籤(tabbed menu)、燈箱(modal),不過比較陽春,也沒有預設開啟的設計。

本篇算是對 :target 選擇器的小練習,是真的可以不用寫 JavaScript 就做出頁籤、手風琴這二個功能,但 Augustus 在寫完後,還是覺得用 JS 會比較好,因為有些小地方只靠 CSS 似乎還是無法做到,比方後面會講到的預設只能開啟最後一個而無法預設開啟第一個。

本篇最後完成的 Demo 在這:https://codepen.io/letswrite/pen/poEEYVZ


頁籤 Tab

頁籤分為二部份:頁籤標題、對應的內容區塊。

因為頁籤標題必須要能提示使用者目前開啟的是哪一個,原本 Augustus 是寫成這樣:

// 頁籤標題
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 如下:

Summary
用 CSS :target 製作頁籤、手風琴功能
Article Name
用 CSS :target 製作頁籤、手風琴功能
Description
本篇大綱:本篇要解決的問題。頁籤 Tab。手風琴 Collapse。本篇算是對 :target 選擇器的小練習,是真的可以不用寫 JavaScript 就做出頁籤、手風琴這二個功能。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Analytics Google

如果頁面有 id=”ga”,用 gtag 埋 Google Analytics 會收不到流量

PWA

PWA 學習筆記 – 5:用 Firebase 做 Web Push

WordPress

搭配 WooCommerce 的 2 個好用外掛:客製訂單、客製報表

Forms Google

完全客製 Google 表單,美化表單樣式

Front-End

用 CSS :target 製作頁籤、手風琴功能

Google Maps

Google Maps API 學習筆記 – 2:在地圖上畫個日本結界

Google Maps

Google Maps API 學習筆記 – 3:用熱圖 / Heat map 製作全台 12 小時雨量分佈圖

API

ML5.js 神經網路 開發圖像辨識

Google Others

用 GCP 建立 Cloud Functions

Google Maps

Google Maps API 學習筆記 – 1:地圖、標記、客製樣式

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言