DAY09 - [CSS] 页签与其他小事

今日文章目录

页签应用情境

事前准备

CSS练习

参考资料

页签应用情境

页签不管是在小尺寸或大萤幕上，都是时常看到的必备零件！今天来练习一下吧！
练习范例参考：

图片参考来源

事前准备

这次练习内容会使用 <input type="radio" /> 搭配 CSS选取器 :checked 达到切换页签的效果。
特别注意：画面上input会显藏，使用者是点击label。
- <input id="myTab"> 的myTab 要对应到 <label for="myTab">，确保之後点击label才会选取到。
- 每个页签会对应到一个radio，记得每个radio的name要一致(<input name="panelCtrl">)，这样才会对应到同组单选。
HTML 架构：

<section class="mainTab">
    <div class="container">
        <input type="radio" name="panelCtrl" id="tab1" checked>
        <input type="radio" name="panelCtrl" id="tab2">
        <input type="radio" name="panelCtrl" id="tab3">

        <div class="tabPanel">
            <label for="tab1" class="tab tab1">页签1</label>
            <label for="tab2" class="tab tab2">页签2</label>
            <label for="tab3" class="tab tab3">页签3</label>
        </div>
        
        <div class="contentGroup">
            <div class="content content1">
               <!-- 页签1 内容 -->
            </div>
            <div class="content content2">
               <!-- 页签2 内容 -->
            </div>
            <div class="content content3">
               <!-- 页签3 内容 -->
            </div>
        </div>
        
    </div>
</section>

CSS重点

留意HTML结构中，input层级同.tabPanel与contentGroup。目的是当radio选取时，我可以同时操作页签与页签内容。
我使用到 ~：表示选取後方同层所有指定对象。以下方CSS为例：
- #tab1:checked ~ .contentGroup .content1 :
  当radio选取时，後方 .contentGroup内.content1 动作。
- #tab1:checked ~ .tabPanel .tab1 :
  当radio选取时，後方 .tabPanel内 .tabPanel动作。

    .contentGroup .content{
        display: none;
    }
    #tab1:checked ~ .contentGroup .content1,
    #tab2:checked ~ .contentGroup .content2,
    #tab3:checked ~ .contentGroup .content3{
        display: block;
    }
    #tab1:checked ~ .tabPanel .tab1,
    #tab2:checked ~ .tabPanel .tab2,
    #tab3:checked ~ .tabPanel .tab3{
        border-bottom: 4px solid gray;
    }
    #tab1,
    #tab2,
    #tab3{
        display: none;
    }