zoukankan      html  css  js  c++  java
  • CSS特效(2)——input radio、label实现tab切换

    input radio、label实现tab切换

    <!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;
           400px;
          margin: 50px auto;
        }
    
        input {
          display: none;
        }
    
        .nav {
          padding:0;
          position: relative;
          overflow: hidden;
        }
    
        li {
          list-style: none;
           200px;
          float: left;
          text-align: center;
          background: #ddd;
        }
    
        li label {
          display: block;
           200px;
          line-height: 36px;
          font-size: 18px;
          cursor: pointer;
        }
    
        .content {
          position: relative;
          overflow: hidden;
           400px;
          height: 100px;
          border: 1px solid #999;
          box-sizing: border-box;
          padding: 10px;
        }
    
        .content1,
        .content2 {
          display: none;
           100%;
          height: 100%;
        }
    
        .nav1:checked~.nav li {
          background: #ddd;
          color: #000;
        }
        .nav1:checked~.nav li:first-child {
            background: #ff7300;
            color: #fff;
          }
        .nav2:checked~.nav li {
          background: #ddd;
          color: #000;
    
        }
    
        .nav2:checked~.nav li:last-child {
            background: #ff7300;
            color: #fff;
          }
        .nav1:checked~.content>div {
          display: none;
    
        }
    
        .nav1:checked~.content>div:first-child {
            display: block;
          }
        .nav2:checked~.content>div {
          display: none;
    
        }
    
        .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>
    
  • 相关阅读:
    linux学习笔记三
    linux学习笔记二
    linux学习笔记一
    Linux操作篇之配置DNS服务(二)
    Linux操作篇之配置DNS服务(一)
    Linux操作篇之配置DHCP服务
    Linux操作篇之配置SSH服务
    Linux操作篇之自动化安装操作系统(二)
    Linux操作篇之自动化安装操作系统(一)
    Linux的shell编程篇之环境变量配置文件
  • 原文地址:https://www.cnblogs.com/janas-luo/p/9604773.html
Copyright © 2011-2022 走看看