前端开发者| 前端开发we文档 |
| 开发需求文档 前端 |
| 前端开发规范 百度文档 |
| 标准前端开发规范文档 |
结构布局：把每一个标签和其对应的标签内容作为一个区块，标签使用label，内容区块使用定位。
实现原理：当点击label时候，相应的input会被触发一个checked事件然后利用css选择器选择它的兄弟节点设置内容区块display:block;，默认内容区块是display:none;
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<style type=”text/css”>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’,
Helvetica, Arial, sans-serif, ‘Apple Color Emoji’,
‘Segoe UI Emoji’, ‘Segoe UI Symbol’;
}
ul,
li {
list-style: none;
}
.tab-content:after {
display: block;
content: ”;
clear: both;
height: 0;
visibility: hidden;
}
.tab-content li {
float: left;
margin-right: 3px;
}
.tab-content li:last-child {
margin-right: 0;
}
.tab-content li input {
display: none;
}
.tab-content li input:checked ~ .navI-txt {
display: block;
}
.tab-content li input:checked + .navI-tit {
background: #fff;
border-bottom: none;
z-index: 1;
position: relative;
}
.tab-content li label {
display: block;
padding: 0 15px;
height: 28px;
line-height: 28px;
text-align: center;
cursor: pointer;
border: 1px solid #c9c9ca;
background-color: #ededef;
border-radius: 3px 3px 0 0;
font-size: 14px;
color: #535353;
}
.tab-content li .navI-txt {
position: absolute;
top: 28px;
left: 0px;
display: none;
width: 100%;
border: 1px solid #cbcbcb;
margin-top: -1px;
}
</style>
</head>
<body>
<ul class=”tab-content”>
<li>
<input
class=”navI-radio”
name=”nav”
type=”radio”
id=”nav1″
checked
/>
<label class=”navI-tit” for=”nav1″>项目一</label>
<p class=”navI-txt”>项目一内容</p>
</li>
<li>
<input class=”navI-radio” name=”nav” type=”radio” id=”nav2″ />
<label class=”navI-tit” for=”nav2″>项目二</label>
<p class=”navI-txt”>项目二内容</p>
</li>
<li>
<input class=”navI-radio” name=”nav” type=”radio” id=”nav3″ />
<label class=”navI-tit” for=”nav3″>项目三</label>
<p class=”navI-txt”>项目三内容</p>
</li>
<li>
<input class=”navI-radio” name=”nav” type=”radio” id=”nav4″ />
<label class=”navI-tit” for=”nav4″>项目四</label>
<p class=”navI-txt”>项目四内容</p>
</li>
</ul>
</body>
</html>
| 前端开发方案文档 |
| 前端的接口开发文档 |
| 前端开发看不懂文档 |
» 本文来自：前端开发者 » 《前端开发CSS实现tab切换》
» 本文链接地址：https://www.rokub.com/6745.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册