純 CSS 製作 HTML 頁籤切換 的效果與實例

頁籤切換 這個功能,在我一開始當前端的時候查了蠻多種資料的,這篇教學製作的成品也是當初從網路東拼西湊再自己改良而來的。
因為當時對Javascript實在很不熟,所以都會想盡可能用純CSS來完成畫面改變。

當然也是可以做到,但如果想搭配撈資料那些跟後端溝通的模式,甚至為了方便維護的話,純CSS未必會是最佳解。

像後來熟悉Javascript後,就會變成CSS搭配Javascript來完成頁籤切換,撰寫的程式碼也比較精簡好閱讀、好維護,CSS也能專注在美化功能就好。

這篇先教大家純CSS能怎麼做到頁籤切換效果,之後有機會再教大家用更便利的Javascript完成頁籤切換吧!

純CSS製作HTML頁籤切換效果

開始看程式碼之前,先看一下完成後的樣式:

頁籤切換 完成樣式
頁籤切換 完成樣式

只要按下上面的頁面1、頁面2等頁籤,就能切換下方顯示的內容。

如下圖就是切換成頁面1時,下方會呈現頁面1的內容。

頁籤切換成頁面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完成某項功能就會相當實用噢!