纯Css Tab选项卡

很多人对于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>

* {

margin:0;

padding:0;

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box;

}

body {

width:100%;

margin:0;

padding:0;

text-align:left;

font-size:12px;

font-family:方正黑体简体;

}

.tabs {

width:100%;

float:none;

list-style:none;

position:relative;

text-align:left;

}

.tabs li {

float:left;

display:block;

}

.tabs input[type="radio"] {

position:absolute;

top:-9999px;

left:-9999px;

}

.tabs label {

display:block;

padding:14px 21px;

border-radius:2px 2px 0 0;

font-size:14px;

font-family:方正黑体简体;

font-weight:normal;

text-transform:uppercase;

cursor:pointer;

position:relative;

top:4px;

-webkit-transition:all 0.2s ease-in-out;

-moz-transition:all 0.2s ease-in-out;

-o-transition:all 0.2s ease-in-out;

transition:all 0.2s ease-in-out;

}

.tabs label:hover {

/**选项卡点击后的背景**/

/*background:#703688;

*/

color:#479fb3;

text-decoration:underline;

font-size:14px;

font-family:方正黑体简体;

}

.tabs .tab-content1 {

z-index:2;

display:none;

overflow:hidden;

width:100%;

font-size:14px;

line-height:25px;

position:absolute;

}

.tabs .tab-content2 {

z-index:2;

display:none;

overflow:hidden;

width:100%;

font-size:14px;

line-height:25px;

position:absolute;

top:47px;

left:0;

}

.tabs [id^="tab"]:checked + label {

top:0;

padding-top:17px;

}

.tabs [id^="tab"]:checked ~ [id^="tab-content"] {

display:block;

}

.h1 {

clear:both;

height:1px;

background-color:#e9e9e9;

}

.first_name {

float:left;

margin:20px 30px;

}

.right_name {

float:right;

margin:20px 50px;

}

作者:小屋
链接:http://www.rumenwu.com/operate/799.html
来源:入门屋
入门屋著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台,如有侵权请联系删除。

(2)
打赏 支付宝打赏 支付宝打赏 微信打赏 微信打赏
上一篇 2018-06-19 23:55
下一篇 2018-07-01 08:56

相关推荐

  • 大众要投资建设覆盖全美的充电站网络,特斯拉也没闲着

    这是传统车企与新兴车企在充电设施上的对决。

    2017-04-17
    3.5K3
  • 运营行业相关词汇

    搜索引擎广告(SEA)Search Engine Advertising,广告主根据自己的产品或服务的内容、特点等,确定相关的关键词,撰写广告内容并自主定价投放的广告。当用户搜索到广告主投放的关键词时,相应的广告就会展示 信息流广告也称“原生广告”,与内容混排在一起,又称“最不像广告的广告”、“长得最像内容的广告”,一般如不留意在它们周围出现的“推广”、“广…

    2020-07-02
    1.2K0
  • 教育大公司玩转短视频账号,为什么这么难?

    如今短视频占据了很多用户的休闲娱乐时间,短视频平台也成了各个商家的引流平台;各种教育公司也在短视频平台上进行线上教育的普及和产品的投放,但是教育的短视频孵化和变现并不容易;本文作者分析了教育公司运营短视频账号的现状,我们一起来看一下。 跟身边做教育的朋友聊了聊他们最近运营抖音、快手账号的进展,朋友叙述的过程里频频叹气,言语间透露出身处教育公司的运营做短视频的…

    2020-10-10
    9440
  • 转化变现相关词汇

    ROIReturn On Investment,投资回报率,指通过投资而应返回的价值,它涵盖了企业的获利目标,又称会计收益率、投资利润率 SSR展示发送比,show/send*100%,指一个广告发送后真正被展示给用户的几率 AdLoad广告负载量,AdLoad=Send/(Send+Impression) CTRClick Through Rate,点击到…

    2020-07-02
    1.0K0
  • 如何从 0 到 1 搭建私域流量

    最近几年私域流量非常火爆,不少企业开始运营自己的私域流量,私域流量是属于成本比较低,转化率还不错的一种方式;并且跟用户可以产生密切的联系,更加深入用户群体;本文作者分享了关于如何从 0 到 1 搭建私域流量的经验,我们一起来看一下。 这是一篇私域流量运营的入门文章,本文主要内容是在介绍电商该如何搭建自己的私域流量。 01 私域流量的本质是什么 百度百科说: …

    2021-03-03
    6090
  • 详解JavaScript轮播图技术理解

    众所周知,轮播图现今在网页中占据着必不可少的地位。任何的一个网站,一个网页,都会出现一个轮播图,而轮播图更是利用JavaScript做出的一个比较基础的动画。下面是我本人对写轮播图的一点见解,很多地方可能不是很全面,甚至可能说是错误的,希望大家多多指点。 下面这个是我自己闲暇时随便做的一个轮播图: 我觉得轮播图中最主要的是要理解到图片为什么会滑动,是怎么控制…

    2018-04-02
    2.6K0