前端|不用JS就能实现的选项卡
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
1.选项卡介绍
在平时浏览网页时，大家经常会使用选项卡来切换页面，在设计网页的过程中，也常用选项卡来整合内容，美化页面效果。简而言之，选项卡就是设置选项的模块，每个选项卡代表一个活动的区域，点击不同的区域，即可展示不同的内容。
2.思路
平常的选项卡制作时，总要引入JavaScript才能实现切换效果，本次选项卡的制作主要是通过CSS来实现的。
用div来页面布局，实现矩形效果，完成导航栏和选项卡页面效果。
用a标签来对选项卡的导航栏和内容界面进行设置。
使用:nth-child(n)和class方法来对页面进行切换。
3.过程
（1）首先创建一个div盒子模型，用作导航栏模块。
<div>
<a href="#">风景图片</a>
<a href="#">最新资讯</a>
<a href="#">热点HOT</a>
<a href="#">浏览记录</a>
</div>（2）用CSS对导航栏的宽高，字体进行设置。（当行高和盒子高度上下一致时，会使单行文字上下居中）
.tab{
width:1200px;
height: 575px;
margin:50px auto;
}
a{
display:block;/*行内元素变为块级元素*/
float:left;
width: 300px;
height: 75px;
background-image: url(../img/1.png);
background-repeat:no-repeat;
background-position: center;
text-align: center;
line-height:75px;
color:white;
text-decoration:none;
font-family:"楷体";
font-size:18px;
font-weight:bold;
}（3）创建一个div作为选项卡内容框架，并用CSS来设置页面切换效果。其中，nth-child(n)选择器匹配父元素中的第n个子元素，元素类型没有限制。（n可以是一个数字，一个关键字，或者一个公式）a:hover~.pic表示a标签和.pic是兄弟关系，不是包含关系。
<div></div>
.pic{
height: 575px;
background-image: url(../img/n1.jpg);
}
a:hover{
color:#ffcc00;
background-image: url(../img/2.png);
}
a:hover~.pic{
background-image: url(../img/n1.jpg);
}
a:nth-child(2):hover~.pic{
background-image: url(../img/n2.jpeg);
}
a:nth-child(3):hover~.pic{
background-image: url(../img/星球.jpg);
}
a:nth-child(4):hover~.pic{
background-image: url(../img/3.jpg);
}效果图如下：
图1
图2
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-05-28，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读