一、布局方式
1a294bbb2b59df8b4d91c9abe6c0cc66 44817277d4dbe0ee461b322712764a80 027560580f1f33ed71ce953b5e505248内容194b3e26ee717c64999d7867364b1b4a3 2576bb482fd11c18965378956ba22268内容294b3e26ee717c64999d7867364b1b4a3 bb7ed47a296cf423a80b8825577d4f15内容394b3e26ee717c64999d7867364b1b4a3 4792cc7a2be3093d2c6aa31bc8a9a308内容494b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3 8f06a8f7cccb49c7d5be7128df06780f ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c6038511d724dafd99d81ec17ad1d91b6a内容15db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c6b9c044d3c0718c32e86032e83f040e04内容25db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c6e4eb7bff501991ad4ae4f05db08354a4内容35db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c6448883488b0add07df49a2b826cd5975内容45db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689 94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3ul,li{ margin:0; padding:0; list-style:none; } .container{ width:400px; height:300px; background-color:silver; } .tab-content{ width:100%; height:80%; overflow:hidden; } .tab-content .item{ width:100%; height:100%; } .tab-control{ width:100%; height:20%; } .tab-control ul{ height:100%; } .tab-control li{ width:25%; height:100%; float:left; border:1px solid silver; box-sizing:border-box; background-color:white; cursor: pointer; } .tab-control li:hover{ background-color:#7b7474 } .tab-control a{ display:inline-block; width:100%; height:100%; line-height:100%; text-align:center; text-decoration: none; } .tab-control a::after{ content:; display:inline-block; height:100%; vertical-align:middle; } .tab-content .item:target{ background:yellow; }
2、内容与tab一体
<p class="container"> <ul> <li class="item active"> <p class="title">1</p> <p class="content">1</p> </li> <li class="item"> <p class="title">2</p> <p class="content ml1">2</p> </li> <li class="item"> <p class="title">3</p> <p class="content ml2">3</p> </li> <li class="item"> <p class="title">4</p> <p class="content ml3">4</p> </li> </ul> </p>
ul,li,p{ margin:0; padding:0; list-style:none; } .container{ width:400px; height:300px; background-color:silver; border:1px solid silver; } .container ul{ width:100%; height:100%; overflow:hidden; } .container .item{ float:left; width:25%; height:100%; background-color:white; } .container .item .title{ line-height:40px; border:1px solid silver; box-sizing:border-box; text-align:center; cursor:pointer; } .container .item .content{ width:400%; height:100%; background-color:yellow; } .ml1{ margin-left:-100%; } .ml2{ margin-left:-200%; } .ml3{ margin-left:-300%; } .active{ position:relative; z-index:1 } .container .item:hover{ position:relative; z-index:1 } .container .item:hover .title{ border-bottom:none; background-color:yellow; }
利用负margin，将内容区对齐，然后内容去添加背景色，避免不同tab对应的区域透视重叠。
二、css实现交互
1、锚点实现（target）
(1)针对布局一：item从上往下排列，父元素tab-content加上overflow:hidden。利用锚点，点击不同a标签的时候，具有对应id的item会切换到tab-content的视图中，然后利用hover给tab按钮加上切换样式。
<p class="container"> <p class="tab-content"> <p id="item1" class="item">内容1</p> <p id="item2" class="item">内容2</p> <p id="item3" class="item">内容3</p> <p id="item4" class="item">内容4</p> </p> <p class="tab-control"> <ul> <li><a href="#item1">内容1</a></li> <li><a href="#item2">内容2</a></li> <li><a href="#item3">内容3</a></li> <li><a href="#item4">内容4</a></li> </ul> </p> </p>
ul,li{ margin:0; padding:0; list-style:none; } .container{ width:400px; height:300px; background-color:silver; } .tab-content{ width:100%; height:80%; overflow:hidden; } .tab-content .item{ width:100%; height:100%; } .tab-control{ width:100%; height:20%; } .tab-control ul{ height:100%; } .tab-control li{ width:25%; height:100%; float:left; border:1px solid silver; box-sizing:border-box; background-color:white; cursor: pointer; } .tab-control li:hover{ background-color:#7b7474 } .tab-control a{ display:inline-block; width:100%; height:100%; line-height:100%; text-align:center; text-decoration: none; } .tab-control a::after{ content:""; display:inline-block; height:100%; vertical-align:middle; }
上述方法只是利用了锚点切换，没有使用：target。修改css
ul,li{ margin:0; padding:0; list-style:none; } .container{ width:400px; height:300px; background-color:silver; } .tab-content{ position:relative; width:100%; height:80%; overflow:hidden; } .tab-content .item{ position:absolute; left:0; top:0; width:100%; height:100%; } .tab-control{ width:100%; height:20%; } .tab-control ul{ height:100%; } .tab-control li{ width:25%; height:100%; float:left; border:1px solid silver; box-sizing:border-box; background-color:white; cursor: pointer; } .tab-control li:hover{ background-color:#7b7474 } .tab-control a{ display:inline-block; width:100%; height:100%; line-height:100%; text-align:center; text-decoration: none; } .tab-control a::after{ content:""; display:inline-block; height:100%; vertical-align:middle; } .tab-content .item:target{ z-index:1; background-color:yellow; }
item使用绝对定位，然后使用:target修改元素z-index达到切换效果（其实也可以通过控制元素的display来达到切换效果）
（2）针对布局二：
<p class="container"> <ul> <li class="item active" id="item1"> <p class="title"><a href="#item1">1</a></p> <p class="content">1</p> </li> <li class="item" id="item2"> <p class="title"><a href="#item2">2</a></p> <p class="content ml1">2</p> </li> <li class="item" id="item3"> <p class="title"><a href="#item3">3</a></p> <p class="content ml2">3</p> </li> <li class="item" id="item4"> <p class="title"><a href="#item4">4</a></p> <p class="content ml3">4</p> </li> </ul> </p>
ul, li, p { margin: 0; padding: 0; list-style: none; } .container { width: 400px; height: 300px; background-color: silver; border: 1px solid silver; } .container ul { width: 100%; height: 100%; overflow: hidden; } .container .item { float: left; width: 25%; height: 100%; background-color: white; } .container .item .title { line-height: 40px; border: 1px solid silver; box-sizing: border-box; text-align: center; cursor: pointer; } .container .item a { display:inline-block; width:100%; height:100%; text-decoration: none; } .container .item .content { width: 400%; height: 100%; background-color: yellow; } .ml1 { margin-left: -100%; } .ml2 { margin-left: -200%; } .ml3 { margin-left: -300%; } .active { position: relative; z-index: 1 } .container .item:target { position: relative; z-index: 1 } .container .item:target .title { border-bottom: none; background-color: yellow; }
2、hover实现
（1）针对布局一：
无法简单的通过css实现
（2）针对布局二：
<p class="container"> <ul> <li class="item active"> <p class="title">1</p> <p class="content">1</p> </li> <li class="item"> <p class="title">2</p> <p class="content ml1">2</p> </li> <li class="item"> <p class="title">3</p> <p class="content ml2">3</p> </li> <li class="item"> <p class="title">4</p> <p class="content ml3">4</p> </li> </ul> </p>
ul,li,p{ margin:0; padding:0; list-style:none; } .container{ width:400px; height:300px; background-color:silver; border:1px solid silver; } .container ul{ width:100%; height:100%; overflow:hidden; } .container .item{ float:left; width:25%; height:100%; background-color:white; } .container .item .title{ line-height:40px; border:1px solid silver; box-sizing:border-box; text-align:center; cursor:pointer; } .container .item .content{ width:400%; height:100%; background-color:yellow; } .ml1{ margin-left:-100%; } .ml2{ margin-left:-200%; } .ml3{ margin-left:-300%; } .active{ position:relative; z-index:1 } .container .item:hover{ position:relative; z-index:1 } .container .item:hover .title{ border-bottom:none; background-color:yellow; }
3、label与:checked实现
（1）针对布局一：
<p class="container"> <p class="tab-content"> <input type="radio" name="item" class="radio-item" id="item1" checked/> <p class="item">内容1</p> <input type="radio" name="item" class="radio-item" id="item2" /> <p class="item">内容2</p> <input type="radio" name="item" class="radio-item" id="item3" /> <p class="item">内容3</p> <input type="radio" name="item" class="radio-item" id="item4" /> <p class="item">内容4</p> </p> <p class="tab-control"> <ul> <li><label for="item1">内容1</label></li> <li><label for="item2">内容2</label></li> <li><label for="item3">内容3</label></li> <li><label for="item4">内容4</label></li> </ul> </p> </p>
ul, li { margin: 0; padding: 0; list-style: none; } .container { width: 400px; height: 300px; background-color: silver; } .tab-content { position: relative; width: 100%; height: 80%; overflow: hidden; } input { margin: 0; width: 0; } .tab-content .item { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .tab-control { width: 100%; height: 20%; } .tab-control ul { height: 100%; } .tab-control li { width: 25%; height: 100%; float: left; border: 1px solid silver; box-sizing: border-box; background-color: white; } .tab-control li:hover { background-color: #7b7474 } .tab-control label { display: inline-block; width: 100%; height: 100%; line-height: 100%; text-align: center; text-decoration: none; cursor: pointer; } .tab-control label::after { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .tab-content .radio-item{ display:none; } .tab-content .radio-item:checked+.item { z-index: 1; background-color: yellow; }
利用css :checked与+（选择紧接在另一个元素后的元素，而且二者有相同的父元素）选择符。
（2）针对布局二：
<p class="container"> <ul> <li class="item active"> <input type="radio" name="item" class="radio-item" id="item1" checked/> <label class="title" for="item1">1</label> <p class="content">1</p> </li> <li class="item"> <input type="radio" name="item" class="radio-item" id="item2" /> <label class="title" for="item2">2</label> <p class="content ml1">2</p> </li> <li class="item"> <input type="radio" name="item" class="radio-item" id="item3" /> <label class="title" for="item3">3</label> <p class="content ml2">3</p> </li> <li class="item"> <input type="radio" name="item" class="radio-item" id="item4" /> <label class="title" for="item4">4</label> <p class="content ml3">4</p> </li> </ul> </p>
ul,li,p{ margin:0; padding:0; list-style:none; } .container{ width:400px; height:300px; background-color:silver; border:1px solid silver; } .container ul{ width:100%; height:100%; overflow:hidden; } .container .item{ float:left; width:25%; height:100%; background-color:white; } .container .item .title{ display:inline-block; width:100%; line-height:40px; border:1px solid silver; box-sizing:border-box; text-align:center; cursor:pointer; } .container .item .content{ position:relative; width:400%; height:100%; background-color:yellow; } .ml1{ margin-left:-100%; } .ml2{ margin-left:-200%; } .ml3{ margin-left:-300%; } .radio-item{ display:none; } .radio-item:checked~.title{ background-color:yellow; border-bottom:none; } .radio-item:checked~.content{ background-color:yellow; z-index:1; }
以上就是css实现tab布局的示例代码分享（图）的详细内容。