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

来源：互联网发布：思科网络架构师编辑：程序博客网时间：2024/06/05 03:25

学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;}

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

0 0