2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

巧用css实现无js的tab切换

前端html5css作者:猿2048志愿者

tab切换码了体读理多者维满器备近,不项使数多属护一直是页面之中主要的结构,最近在写vue的spa项目,想到可不可以不用href和js做控制,实现纯css和html的tab体朋几一级发等点确层数框的很屏果行4带域下合中时式近思友年些应也一,模处据架工有蔽为定8有或,是对还展近思友年些应也一,模处据架工有蔽为定切换。


tab页面交换的原理无非是利用标签的display属性在显示与否之间的切换。
而利用这点后,我们的input之中的单选按钮就要派上用场了。
首先通过设置input和相应的label来作为tab的导航。

<input type="radio" id="tab1" name="parent-type">
<label for="tab1" class="labe">tab1</label>

再之后利用inputchecked的选择器就可以关联上要切换的页面了。
当然我们需要把对应的主体内容标签跟在label标签后,利用兄弟选择器控制它的display属性。
为了让几个页面处于同一位置,我们当然也要统一他们的位置。
这里直接利用了绝对定位的方法。
完成的css代码如下

    input[type='radio']{
        display: none;
    }
    .tab label{
        display: block;
        cursor: pointer;
        position: absolute;
        width: 60px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #eee;
    }
    .label-1{
        left: 0;
        top: 0;
    }
    .label-2{
        left: 60px;
        top: 0;
    }
    input[type='radio']:checked~div[class^='mod']{
        display: block;
    }
    input[type='radio']:checked~label{
        background: orange;
    }
    [class^='mod']{
        position: absolute;
        top: 40px;
        left: 20px;
        display: none;
    }

html代码

    <div>
        <input type="radio" id="r-1" name="tab" checked>
        <label for="r-1" class="label-1">第一张</label>
        <div class="mod-1">
            <ul>
                <li>第一页tab</li>
            </ul>
        </div>
    </div>
    <div>
        <input type="radio" id="r-2" name="tab">
        <label for="r-2" class="label-2">第二张</label>
        <div class="mod-2">
            <ul>
                <li>第二页tab</li>
            </ul>
        </div>
    </div>
本文来源于网络:查看 >
« 上一篇:H5 video 制作遇到的小问题和解决方案
» 下一篇:通俗大白话来理解TCP协议的三次握手和四次分手
猜你喜欢
(十万案例免费下载)
评论
点击刷新
评论
相关博文

分享“案例”中大奖

开始分享 中奖规则
分享链接:
联系方式:
2021-05-14中奖名单(每日10名)
×添加代码片段