纯CSStabs导航切换

看了一篇技术文章，使用纯CSS导航切换(label 绑定 input:radio && ~)，其使用了  CSS3 兄弟选择符(E~F) ，即 选择选择E元素后面的所有兄弟元素F。 

利用input的 label for属性+csss 伪类：checked ，进行点击判断。其demo如下

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>纯CSStabs导航切换 </title>
<style type="text/css">
  *{
    box-sizing:border-box;
  }
  .container{
    max-width: 600px;
    margin: 50px auto;
  }
  .container input{
    display: none;
  } 
  .nav {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
  } 
  .nav li {
    width: 50%;
    display: inline-block;
    text-align: center;
    background: #ddd;  
  }
  .nav li label{
    width: 100%;
    padding: 20px 0;
    display: block;
    cursor: pointer;
  }
  .content {
    position: relative;
    overflow: hidden;
    width: 100%;
    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 {
    background: #ff7300;
    color: #fff;
  } 
  .nav2:checked ~ .nav li:last-child {
    background: #ff7300;
    color: #fff;
  }
  .nav1:checked ~ .content > div ,.nav2:checked ~ .content>div {
    display: none;
  }
  .nav1:checked ~ .content > div:first-child {
    display: block;
  }
 
  .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" checked  name="nav">
  <input class="nav2" id="li2" type="radio" name="nav">
  <ul class='nav'>
    <li class='active'><label for="li1">列表1</label> 
    <li><label for="li2">列表2</label> 
  </ul>
  <div class="content">
    <div class="content1 default">列表1内容:123456</div>
    <div class="content2">列表2内容:abcdefgkijkl</div>
  </div>
</div> 
</body>
</html>

 

 

posted @ 2016-11-01 10:40  Gaochunling  阅读(228)  评论(0)    收藏  举报