在视觉布局中，三个导航内容属于同一个父元素，与父元素的高度相同，并按照块级元素的排列方式进行排布，父元素设置溢出隐藏时，默认只显示第一个导航内容
点击导航标题时，对应的导航内容到达导航标题行下面，达到了导航切换的效果
使用伪类hover来实现改变当前导航标题样式的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,p{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
a{text-decoration: none;color: inherit;}
input{margin: 0;padding: 0;border:none;}
.box{width:572px;border:1px solid #999;font:14px "微软雅黑";overflow:hidden;}
.nav-tit{margin-left: -1px;height: 40px;line-height: 40px;text-align: center;background-color: #f1f1f1;overflow: hidden;}
.nav-titI{box-sizing: border-box;float: left;width: 33.333%;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;cursor: pointer;}
.nav-txt{height: 200px;}
.nav-txtI{height: 200px;display:block;width: 100%;text-indent: 2em; line-height: 2;}
/*重点内容*/
.nav-txt{overflow: hidden;}
.nav-titI:hover{background-color: #fff;border-bottom:none;}
</style>
</head>
<body>
<div class="box">
<nav class="nav-tit">
<label class="nav-titI" for="kc">视频</label>
<label class="nav-titI" for="xx">娱乐</label>
<label class="nav-titI" for="jn">军事</label>
</nav>
<nav class="nav-txt">
<input class="nav-txtI nav-txtI_active" id="kc" value="视频" readonly>
<input class="nav-txtI" id="xx" value="娱乐" readonly>
<input class="nav-txtI" id="jn" value="军事" readonly>
</nav>
</div>
</body>
</html>
[缺点]：初始态默认选中的导航标题样式无法设置；有时会出现页面跳动的效果；hover态与点击态分开，可能会让人犯晕；鼠标移出导航模块时，导航标题的样式无法固定，恢复到默认状态
原文链接：https://www.qiquanji.com/post/7046.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知