（自学收获）纯css网页小部件--tab切换

最新推荐文章于 2023-02-06 09:36:53 发布

web_magic

最新推荐文章于 2023-02-06 09:36:53 发布

阅读量391

点赞数

文章标签： css 长得老的萌新新手

本文链接：https://blog.csdn.net/web_magic/article/details/70494151

版权

学js的同时，今天尝试了下纯css的tab切换效果，做完说一下自己的收获。

做tab我学到的css有两种方法我没学到的可能还有nnnn种。

首先做tab主要思路就是靠display的none和block值，来完成隐藏和显示你要表现的内容。

第一种是使用<a>标签和 id锚连接，通过<a>连接到同一网页相应的#部位，通过：target伪类（每个伪类所捕获的状态不一样，要根据状态选择伪类，所以这里选择target）。

第二种是靠<li> <input> 和 <lebal>

思路：<li>作为一个按钮效果的列表。

<lebal>的作用就是让<li>和<input>关联，让li的内容被点击时，会触发input的check状态。

<input>具有check的状态可以通过checked伪类和~兄弟元素来连接要表现的样式。

效果截图：

html代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tabSwitch</title>
	<link rel="stylesheet" href="tabSwitch.css">
</head>
<body>
	<div class="container">
        <input class="nav1" id="li1" type="radio" name="nav">
        <input class="nav2" id="li2" type="radio" name="nav">
        <ul class='nav'>
            <li><label for="li1">列表1</label></li>
            <li><label for="li2">列表2</label></li>
        </ul>
        <div class="content">
            <div class="content1">哈哈哈我是内容一</div>
            <div class="content2">嘿嘿嘿我是内容二</div>
         </div>
    </div>
</body>
</html>

css代码

* {
    padding: 0;
    margin: 0;
}
.container {
    position: absolute;
    left: 15%;
    top: 15%;
    width: 400px;
    height: 300px;
    border: 1px solid #aa0;
}
input {
    display: none;
}
.nav {
    width: 400px;
    height: 50px;
}
.nav li {
    float: left;
    width: 198px;
    border: 1px solid #fff;
    background-color: #999;
    cursor: pointer;
    height: 50px;
    list-style: none;
    box-sizing: border-box;
    text-align: center;
    line-height: 50px;
}
.nav li label {
    display: block;
    width:200px;
    height: 50px;
}
.content {
    padding: 20px;
    width: 400px;
    height: 250px;
}
.content1,
.content2 {
    display: none;
}
.nav1:checked ~ .nav li:nth-child(1) {
    color: #fff;
    background-color: #0a0;
}
.nav2:checked ~ .nav li:nth-child(2) {
    color: #fff;
    background-color: #0a0;
}
.nav1:checked ~ .content > .content1{
    display: block;
}
.nav2:checked ~ .content > .content2{
    display: block;
}

好多标签都需要好好体会他的用法，他的功能有很大的挖掘潜力。