頁籤切換 這個功能,在我一開始當前端的時候查了蠻多種資料的,這篇教學製作的成品也是當初從網路東拼西湊再自己改良而來的。
因為當時對Javascript實在很不熟,所以都會想盡可能用純CSS來完成畫面改變。
當然也是可以做到,但如果想搭配撈資料那些跟後端溝通的模式,甚至為了方便維護的話,純CSS未必會是最佳解。
像後來熟悉Javascript後,就會變成CSS搭配Javascript來完成頁籤切換,撰寫的程式碼也比較精簡好閱讀、好維護,CSS也能專注在美化功能就好。
這篇先教大家純CSS能怎麼做到頁籤切換效果,之後有機會再教大家用更便利的Javascript完成頁籤切換吧!
Table of Contents
純CSS製作HTML頁籤切換效果
開始看程式碼之前,先看一下完成後的樣式:
只要按下上面的頁面1、頁面2等頁籤,就能切換下方顯示的內容。
如下圖就是切換成頁面1時,下方會呈現頁面1的內容。
緊接著開始程式碼的撰寫囉,HTML部分:
<!-- HTML -->
<span id="tab-1">主頁</span>
<span id="tab-2">頁面1</span>
<span id="tab-3">頁面2</span>
<span id="tab-4">頁面3</span>
<!-- 頁籤按鈕 -->
<div id="tab">
<ul>
<li><a href="#tab-1">主頁</a></li>
<li><a href="#tab-2">頁面1</a></li>
<li><a href="#tab-3">頁面2</a></li>
<li><a href="#tab-4">頁面3</a></li>
</ul>
<!-- 頁籤的內容區塊 -->
<div class="tab-content-1">
<p>主頁面顯示的內容</p>
</div>
<div class="tab-content-2">
<p>頁面1顯示的內容</p>
</div>
<div class="tab-content-3">
<p>頁面2顯示的內容</p>
</div>
<div class="tab-content-4">
<p>頁面3顯示的內容</p>
</div>
</div>
CSS的部分:
/* CSS */
#tab {
width: 400px;
background: #1caa5d;
border: solid 1px #1caa5d;
}
/* 頁籤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: 15px;
color: #333;
float: left;
padding: 10px;
margin-left: 5px;
}
/*頁籤div內容*/
#tab > div {
clear: both;
padding: 0 15px;
height: 0;
overflow: hidden;
visibility: hidden;
}
/*第一筆的底色*/
span:target ~ #tab > ul li:first-child a {
background: #1caa5d;
}
span:target ~ #tab > div:first-of-type {
visibility: hidden;
height: 0;
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;
border-radius: 5px 5px 0 0;
}
span ~ #tab > ul li:first-child a::before,
#tab-1:target ~ #tab > ul li a[href$="#tab-1"]::before,
#tab-2:target ~ #tab > ul li a[href$="#tab-2"]::before,
#tab-3:target ~ #tab > ul li a[href$="#tab-3"]::before,
#tab-4:target ~ #tab > ul li a[href$="#tab-4"]::before {
background-color: white;
height: 100%;
}
/*頁籤內容顯示&第一筆*/
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;
}
總結
剛開始學習HTML和CSS的時候,面對這種比較稍微複雜的CSS通常也需要一些時間理解,其實後來知道用更便利的Javascript來完成頁籤之後,有些CSS語法就漸漸也沒有再使用了。
因此,我建議適合學習純CSS完成頁籤功能的人有以下兩種:
第一,你是網頁程式設計初學者,能多學任何語法都是進步;
第二,你是一個UI/UX工程師,因為受限於能動的檔案不多,改不到或沒辦法加入Javascript的人,那麼純CSS完成某項功能就會相當實用噢!