纯Css Tab选项卡

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

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

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

<!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

凑合写了个指点一二

页: [1] 2

吾爱破解 - 52pojie.cn's Archiver

纯Css Tab选项卡