纯css实现Tab页切换

本文最后修改于 481 天前，部分内容可能已经过时！

利用label和radio的绑定关系和radio选中时的:checked来实现效果
教程分两部分，一部分就是标题所示的：纯CSS实现Tab页切换，而另一部分和遮罩层有关，所以还是使用js来实现，并且通过冒泡阻止点击Tab页切换时候隐藏遮罩层的问题

代码如下，首先是一个链接URL标签，通过绑定#reward点击事件，当点击之后会弹出遮罩层（二级展开），通过遮罩层实现Tab页切换，效果可参看文章结束后的“打赏”

实现要点

1.Label标签的for属性
2.单选框的:checked伪类
3.CSS的[~]选择器

前言

Html点击部分
//由于我这里是点击后二级展开，所以就使用了A标签，如果是直接实现Tab页的话是不需要的

<a id="reward" href="javascript:;" data-title="如果觉得不错就赞赏一下吧~"><i class="fa fa-gift"></i> 打赏</a>

JavaScript部分

//由于我这里是二级展开，所以就使用了JavaScript，如果是直接实现Tab页的话是不需要的

  <script>
  //显示内容
  $("#reward").click(function(){
    $("#reward_main")[0].style['display']="block";
  });   
  //隐藏内容
   $("#reward_main").click(function(){
     $("#reward_main")[0].style['display']="none";
   });  
    </script>

CSS前言部分
//这部分只是样式美化等作用

#reward_main{
display:none;
background:#606472b3;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

#reward_main input{
display:none;
}

#reward_main img,#reward_body{
max-width: 300px;
width: 300px;
height: 300px;
min-width: 300px;
background: #f3f3f3;
}

#reward_content{
width: 300px;
margin: 5em auto;
position: relative;
box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
border: 1px solid rgba(0,0,0,.2);
border-radius: 6px;
}

#reward_title{
background-color: #f3f3f3;
overflow: hidden;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
padding: 15px;
border-bottom: 1px solid #e5e5e5;
min-height: 16.5px;
width:-webkit-fill-available;
position: initial;
color:black;
}

#reward_body span:first-child img{
display:block;
}


#reward_body label{
width: 18%;
display: inline-block;
text-align: center;
padding: 10px;
color: #000;
background: #f3f3f3;
}

Html内容部分

 <div id="reward_body">

   <span>
      <input type="radio" id="wechat" name="reward"> 
      <label class="reward_title" for="wechat">微信</label> //这里通过label的for属性和上面的radio进行绑定
      <img id="otk_wechat" src="https://www.mochengli.cn/avatar/shang.jpg">
   </span>

   <span>
       <input type="radio" id="alipay" name="reward">
       <label class="reward_title" for="alipay">支付宝</label>
       <img id="otk_alipay" src="https://www.mochengli.cn/link_photo/mochengli_mp.png">
   </span>

   <span>
        <input type="radio" id="qqpay" name="reward">
        <label class="reward_title" for="qqpay">QQ</label>
        <img id="otk_qqpay" src="https://www.mochengli.cn/avatar/shang.jpg"> 
   </span>

   <span>
        <input type="radio" id="order" name="reward">
        <label class="reward_title" for="order">云闪付</label>
        <img id="otk_order" src="https://www.mochengli.cn/avatar/shang.jpg"> 
    </span>

 </div>

CSS关键部分

#reward_body img{
position: absolute;
display:none; //默认是不显示的
}

**#wechat:checked ~ label[for="wechat"],#alipay:checked ~ label[for="alipay"],#qqpay:checked ~ label[for="qqpay"],#order:checked ~ label[for="order"]{
background:#fff;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}**

**#wechat:checked ~ img,#alipay:checked ~ img,#qqpay:checked ~ img,#order:checked ~ img{
display:block;
}**//这里通过css的~选择器进行绑定，思路是当绑定的ID被选中后（ID:checked），紧接在该元素后出现的img进行响应，响应结果是把display的值由none改为block

JS冒泡阻止实现遮罩层

//由于我这里是二级展开，所以就使用了JavaScript冒泡阻止实现遮罩层，如果是直接实现Tab页的话是不需要的
//如果没有冒泡阻止的话，点击Tab切换页的时候也相当于点击到了父类遮罩层，也就会执行父类关闭遮罩层

 <script>
  $("#reward_body").click(function(e){
    e.stopPropagation(); //这一句就是阻止父类也跟着一起动
  });    
  </script>