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

browser
browser

頁籤切換 這個功能，在我一開始當前端的時候查了蠻多種資料的，這篇教學製作的成品也是當初從網路東拼西湊再自己改良而來的。
因為當時對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完成某項功能就會相當實用噢！

標籤

為你推薦