Pure CSS realizes TAB page switching

The checked status of the radio button is obtained through the checked status property of the radio button, and the status of the corresponding element is modified through the CSS sibling selector *+*

HTML part

<template>
    <div class="content">
       <ul>
           <li>
                <input type="radio" value="1" checked name="radioSingle1" id="rdo1" aria-label="">
                <label for="rdo1">tab1</label>
                <div>Label a</div>
           </li>
           <li>
                <input type="radio" value="2" name="radioSingle1" id="rdo2" aria-label="">
                <label for="rdo2">tab2</label>
                <div>Label 2</div>
           </li>
           <li>
                <input type="radio" value="3" name="radioSingle1" id="rdo3" aria-label="">
                <label for="rdo3">tab3</label>
                <div>Label three</div>
           </li>
           <li>
                <input type="radio" value="4" name="radioSingle1" id="rdo4" aria-label="">
                <label for="rdo4">tab4</label>
                <div>Label the four</div>
           </li>
       </ul>
    </div>
</template>
Copy the code

The CSS part

input[type="radio"]:checked + label + div
    display: block
    left: 0
    opacity: 1
input[type="radio"]:checked + label
    color: #2d8cf0
    border-bottom-color: #2d8cf0 ! important
.content
    width: 300px
    height: 300px
    border: 1px solid #ccc
    border-radius: 4px
    margin: 100px auto
    ul
        display: flex
        position: relative
        border-bottom: 1px solid rgb(206 209 216)
        >li
            flex: 1
            text-align: center
            line-height: 40px
            margin: 0 3px
            &:hover
                label
                    color: #2d8cf0
            label
                width: 100%
                cursor: pointer
                display: block
                border-radius: 3px
                transition: color .3s
                border-bottom: 2px solid transparent
            >input
                display: none
            >div
                opacity: 0
                position: absolute
                width: 100%
                left: 300px
                transition: left .4s

Copy the code