纯CSS的导航栏Tab切换方案

1、使用：target伪类选择器以及兄弟选择器的使用~

:target 是 CSS3 新增的一个伪类，可用于选取当前活动的目标元素。当然 URL 末尾带有锚名称 #，就可以指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。它需要一个 id 去匹配文档中的 target 。

使用:target伪类需要html锚点，以及锚点对应的html结构，例如下面a标签的锚点会对应到div的id与锚点名相同的结构

<a href="#list1">首页</a>

<div id="list1">首页的内容</div>

当鼠标点击触发到对应锚点的时候，页面的URL会发生改变：由www.xxxxx.com变成www.xxxxx.com#list1;并且会触发#list1:target{ } 里面的css样式，从而达到操作DOM的效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .container {
      width: 80%;
      margin: 50px auto;
    }

    #list1,
    #list2 {
      display: none;
    }

    #list1:target,
    #list2:target {
      display: block;
    }

    .nav li {
      float: left;
      padding: 50px;
    }

    .nav li a {
      display: inline-block;
      text-decoration: none;
    }

    #list1:target~ .nav li:first-child {
      background-color: #ff5;
    }

    #list2:target~ .nav li:last-child {
      background-color: aquamarine;
    }
  </style>
</head>
<body>
  <div class="container">
    <div id="list1">首页的内容</div>
    <div id="list2">关于我们的内容</div>
    <ul class="nav">
      <li>
        <a href="#list1">首页</a>
      </li>
      <li>
        <a href="#list2">关于我们</a>
      </li>
    </ul>
  </div>
</body>
</html>

方法二：使用表单input ——————>radio,伪类:checked

这种方法需要用到label标签的for属性： for属性规定跟那个表单元素绑定

同时也要用到兄弟选择符~来控制选择节点:checked对应的样式显示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .container {
      width: 500px;
      margin: 50px auto;
      position: relative;
      background-color:bisque;
    }

    ul {
      margin: 0;
      padding:0;
      list-style: none;
      overflow: hidden;
    }

    ul li {
      height: 60px;
      width: 49%;
      float:left;
      border: 1px solid #ddd;
      text-align: center;
      line-height: 60px;
    }

    input {
      position: absolute;
      width: 48%;
      margin: 0;
      padding: 0;
      height: 60px;
      display: none;
    }

    input:nth-of-type(2) {
      left: 48%;
    }

    .content1, .content2 {
      width:500px;
      height: 500px;
      background-color:aqua;
      display: none;
    }

    input:first-child:checked ~ ul li:first-child,
    input:nth-of-type(2):checked ~ ul li:nth-of-type(2) {
      background-color: #ff7300;
      color: #fff;
    }

    input:first-child:checked ~ .content .content1 {
      display: block;
    }

    input:nth-of-type(2):checked ~ .content .content2 {
      display: block;
      background-color:darkmagenta;
    }
  </style>
</head>
<body>
  <div class="container">
    <input name="nav" type="radio" id="listOne" />
    <input name="nav" type="radio" id="listTwo" />
    <ul>
      <li>
        <label for="listOne">列表一</label>
      </li>
      <li>
        <label for="listTwo">列表二</label>
      </li>
    </ul>
    <div class="content">
      <div class="content1">
        这是列表一的内容
      </div>
      <div class="content2">这是列表二的内容</div>
    </div>
  </div>
</body>
</html>

3、

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .container{
      position:relative;
      width:400px;
      margin: 50px auto;
    }

    input{
      display:none;
    }

    .nav{
      position:relative;
      overflow:hidden;
    }

    li{
      width:200px;
      float:left;
      text-align:center;
      background:#ddd;
    }

    li label{
      display:block;
      width:200px;
      line-height:36px;
      font-size:18px;
      cursor:pointer;
    }

    .content{
      position:relative;
      overflow:hidden;
      width:400px;
      height:100px;
      border:1px solid #999;
      box-sizing:border-box;
      padding:10px;
    }

    .content1,
    .content2{
      display:none;
      width:100%;
      height:100%;
    }

    .nav1:checked ~ .nav li,
    .nav2:checked ~ .nav li {
      background:#ddd;
      color:#000;
    }

    .nav1:checked ~ .nav li:first-child,
    .nav2:checked ~ .nav li:last-child {
      background:#ff7300;
      color:#fff;
    }
    /* .nav1:checked ~ .nav li {
      background:#ddd;
      color:#000;
      
      &:first-child{
        background:#ff7300;
        color:#fff;
      }
    }
    .nav2:checked ~ .nav li{
      background:#ddd;
      color:#000;
      
      &:last-child{
        background:#ff7300;
        color:#fff;
      }
    }

    .nav1:checked ~ .content > div{
      display:none;
      
      &:first-child{
      display:block;
      }
    }
    .nav2:checked ~ .content > div{
      display:none;
      
      &:last-child{
      display:block;
      }
    } */

    .nav1:checked ~ .content > div,
    .nav2:checked ~ .content > div {
      display:none;
    }

    .nav1:checked ~ .content > div:first-child,
    .nav2:checked ~ .content > div:last-child {
      display:block;
    }

    .active {
      background:#ff7300;
      color:#fff;
    }

    .default{
      display:block;
    }
  </style>
</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 class='active'><label for="li1">列表1</label></li>
        <li><label for="li2">列表2</label></li>
      </ul>
      <div class="content">
        <div class="content1 default">列表1内容:123456</div>
        <div class="content2">列表2内容:abcdefgkijkl</div>
      </div>
    </div>
</body>
</html>

纯CSS的导航栏Tab切换方案

猜你喜欢