纯Css Tab选项卡

GeekHacker · 发表于 2018-10-12 13:35

本帖最后由 GeekHacker 于 2018-10-12 16:06 编辑

很多人对于js比较无奈，在网上下载的效果，调试过程中总会遇到一些问题，所以很多人渴望有css能实现简单的tab选项卡的效果，下面分享给大家的就是纯css，比较实用，希望能帮到大家。

[HTML] 纯文本查看 复制代码

<DOCTYPE html>
<html>
<head>
    <title>Tab选项卡</title>
    <meta charset="utf-8">
    <style type="text/css">
        body{
            font-size: 0;
        }
        .box{
            text-align: center;
        }
        .box .tab{
            display: inline-block;
            width: 120px;
            height: 44px;
            padding: 7px;
            border: 1px solid #ccc;
            border-bottom: 0px;
            box-sizing:border-box;
            background: #fff;
            font-size: 16px;
            line-height: 26px;
            color: #555;
            transition: all 0.5s linear;
        }
        .box .tab:hover{
            background: #eee;
            transition: all 0.5s linear;
        }
        .con{
            width: 800px;
            height: 400px;
            margin:0 auto;
        }
        .con .list{
            width: 800px;
            height: 400px;
            border: 1px solid #ccc;
            padding: 10px;
            position: absolute;/*堆一起*/
            z-index: 1;
            box-sizing:border-box;
        }
        .list img{
            height: 300px;
            width: auto;
            margin: 40px auto;
        }
        .box>.tab:nth-child(1):hover~.con>.list:nth-child(1),
        .box>.tab:nth-child(2):hover~.con>.list:nth-child(2),
        .box>.tab:nth-child(3):hover~.con>.list:nth-child(3),
        .box>.tab:nth-child(4):hover~.con>.list:nth-child(4),
        .list:hover{
            z-index: 3;
        }
    </style>
</head>
<body>
    <div class="box">
        <a class="tab">哇咔咔</a>
        <a class="tab">太棒了</a>
        <a class="tab">纳尼</a>
        <a class="tab">不要听</a>
        <div class="con">
            <div class="list"><img src="img/a.jpg"></div>
            <div class="list"><img src="img/c.jpg"></div>
            <div class="list"><img src="img/f.jpg"></div>
            <div class="list"><img src="img/h.jpg"></div>
        </div>
    </div>
</body>
</html>

wangqiustc · 发表于 2018-10-12 13:52

我点了小尾巴进去了，不错的网站

q314956820 · 发表于 2018-10-12 14:06

兼容性怎么样呀

q314956820 · 发表于 2018-10-12 14:19

感觉不行呀是不是哪里不对

极地企鹅 · 发表于 2018-10-12 15:34

代码格式有问题

无影 · 发表于 2018-10-12 22:21

感觉不需要tab和list
直接.box a和.box .con div不就行了
为什么要写那么多class？

GeekHacker · 发表于 2018-10-13 23:04

无影发表于 2018-10-12 22:21
感觉不需要tab和list
直接.box a和.box .con div不就行了
为什么要写那么多class？

好的，学到了，我试试

knian · 发表于 2018-10-20 18:28

不错不错，感谢分享

jixian34 · 发表于 2018-11-14 17:12

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>taps</title>
    <link rel="stylesheet" type="text/css" media="screen" href="css/taps.css" />
</head>
<body>
    <div class="taps">
        <form>
            <input type="radio" name="tap" id="tap1">
            <label for="tap1">tap1</label>
            <p>我是tap1</p>
            <input type="radio" name="tap" id="tap2">
            <label for="tap2">tap2</label>
            <p>我是tap2</p>
            <input type="radio" name="tap" id="tap3">
            <label for="tap3">tap3</label>
            <p>我是tap3</p>
        </form>
    </div>
            
    </div>
</body>
</html>

.taps{
    width: 600px;
    height: 300px;
    border: 1px solid black;
    margin: 100px auto;
    font-size: 0px;
    position: relative;
}
.taps form input{
    display: none;
}
.taps form input:checked+label{
    border-bottom: none;
}
.taps form input:checked+label+p{
    display: block;
}
.taps form label{
    float: left;
    font-size: 20px;
    box-sizing: border-box;
    width: 200px;
    height: 50px;
    line-height: 50px;
    padding-left: 70px;
    border: 1px solid black;
    border-left: none;
    border-top: none;
    display: inline-block;
}
.taps form label:nth-of-type(3){
    border-right: none;
}
.taps form p{
    font-size: 20px;
    position: absolute;
    top:50px;
    padding-left: 20px;
    display: none;
}

jixian34 · 发表于 2018-11-14 17:17

凑合写了个指点一二

帐号		自动登录	找回密码
密码			注册[Register]

[其他转载] 纯Css Tab选项卡

免费评分