纯css实现tab切换(input[type=radio])

纯css实现tab切换的另一种方法(锚点定位法):纯css实现tab切换(锚点定位)

效果

在这里插入图片描述

核心

利用radio类型的input作为选中的鉴别标签,通过css的“:checked”选择器实现选中项的显示。利用label标签作为选项种类的容器,利用其for属性与input标签绑定。

注意

1、默认第一项选中,所以第一个input元素因该有checked属性。
2、input仅作选择的判断,不用显示,所以应全部display:none;隐藏。

html代码

     <ul class="tab">
        <li class="tab-item">
        	<!-- 默认第一项选中,有checked -->
            <input type="radio" name="check" id="active1" class="tab-input" checked>
            <!-- for属性绑定input -->
            <label for="active1" class="tab-tit">第一项</label>
            <div class="tab-content">
                内容1
            </div>
        </li>
        <li class="tab-item">
            <input type="radio" name="check" id="active2" class="tab-input">
            <label for="active2" class="tab-tit">第二项</label>
            <div class="tab-content">内容2</div>
        </li>
        <li class="tab-item">
            <input type="radio" name="check" id="active3" class="tab-input">
            <label for="active3" class="tab-tit">第三项</label>
            <div class="tab-content">内容3</div>
        </li>
        <li class="tab-item">
            <input type="radio" name="check" id="active4" class="tab-input">
            <label for="active4" class="tab-tit">第四项</label>
            <div class="tab-content">内容4</div>
        </li>
    </ul>

style代码

  	/* 
         * 整体宽、高均为可视化窗口的一半
         * 去除默认的padding,margin居中
         * flex布局为了使li水平平分区域
         * relative是为了内容相对于它进行定位,因为内容的宽度要铺满,所以不能相对于li定位。
         */
        .tab {
            width: 50vw;
            height: 50vh;
            padding: 0;
            margin: 0 auto;
            list-style: none;
            display: flex;
            position: relative;
            border: 1px solid #f0f;
            border-radius: 5px;
            overflow: hidden;
        }
        /* 隐藏input,主要利用“:checked”选择器,达到切换目的 */
        .tab-input {
            display: none;
        }
        /* 给选项卡统一背景色 */
        .tab-item {
            flex: 1;
            height: 60px;
            text-align: center;
            background: cornflowerblue;
        }
        /* 选项卡label撑高 */
        .tab-tit {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 60px;
            cursor: pointer;
        }
        /* 
         * hover高亮,选中高亮。
         * “+”代表下一个,div+p:选择所有紧接着<div>元素之后的<p>元素。
         * “:checked”代表选择每个选中的输入元素
		 */
        .tab-tit:hover,
        .tab-input:checked+.tab-tit {
            background: #f0f;
            color: #fff;
        }
        /* 内容区域默认全隐藏,相对于ul定位*/
        .tab-content {
            display: none;
            position: absolute;
            top: 60px;
            left: 0;
            text-align: left;
            text-indent: 2em;
            padding: 10px;
            box-sizing: border-box;
        }
        /* 
         * 选中项内容区域显示
         * ~:表示某元素之后的每一个某元素。p~ul:选择p元素之后的每一个ul元素
         */
        .tab-input:checked~.tab-content {
            display: block;
        }

如果对你有帮助,可以点赞、收藏+关注😘下面是另一种方法。

纯css实现tab切换的另一种方法(锚点定位法):纯css实现tab切换(锚点定位)