纯CSS实现导航栏Tab切换效果

    <input class="nav1" id="li1" type="radio" name="nav">   

    <input class="nav2" id="li2" type="radio" name="nav">   

    <ul class='nav'>   

        <li class='active'><label for="li1">列表1</label></li>   

        <li><label for="li2">列表2</label></li>   

    </ul>   

    <div class="content">   

        <div class="content1">列表1内容:123456</div>   

        <div class="content1">列表2内容:abcdefgkijkl</div>   

    </div>   

</div>  

使用两个单选框，分别对应两个导航选项，运用上面介绍的 label 绑定表单，:checked 接收点击事件，可以得到第二解法。

看看最后的结果：

Demo戳我：纯CSS导航切换(label 绑定 input:radio && ~)

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!