css 实现选项卡

最新推荐文章于 2024-04-28 09:02:53 发布

hwc520jj

最新推荐文章于 2024-04-28 09:02:53 发布

阅读量151

点赞数

本文链接：https://blog.csdn.net/weixin_45846427/article/details/103339757

版权

想要不使用js实现选项卡 css 也可以实现使用css3中的 input选中后的选择器
:checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。

<!DOCTYPE html>
	<html>
	 <head>
	  <meta charset="utf-8" />
	  <title></title>
	  <style type="text/css">
	   *{
	    margin: 0;
	    padding: 0;
	   }
	   .father{
	    width: 300px;
	    height: 50px;
	    background-color: lightslategray;
	   }
	   .son1,.son2{
	    width: 150px;
	    height: 50px;
	    float: left;
	    text-align: center;
	    line-height: 50px;
	   }
	   .son1{
	    background-color: #fff;
	   }
	   input{
	    display: none;
	   }
	   .option1,.option2{
	    width: 500px;
	    height: 500px;
	     
	   }
	   .option1{
	    background-color: green;
	   }
	   .option2{
	    background-color: blue;
	    display: none;
	   }
	   #one:checked~.father .son1,#two:checked~ .father .son2{
	    background-color: gray;
	   }
	  
	   #two:checked~ .father .son1,#one:checked~.father .son2{
	    background-color: #fff;
	   }
	   label{
	    display: inline-block;
	    width: 150px;
	    height: 50px;
	    cursor: pointer;
	   }
	   #two:checked~.option1,#one:checked~.option2{
	    display: none;
	   }
	   #two:checked~.option2,#one:checked~.option1{
	    display: block;
	   }
	  </style>
	 </head>
	 <body>
	  <input type="radio" checked="checked" name="one" id="one"  />
	  <input type="radio" name="one" id="two"  />
	  <div class="father">
	   
	   <div class="son1">
	    <label for="one">一</label>
	   </div>
	   <div class="son2">
	    <label for="two">二</label>
	   </div>
	  </div>
	  
	  <div class="option1"></div>
	  <div class="option2"></div>
	 </body>
	</html>

在这里插入图片描述

需要使用label联用
才能做到效果

hwc520jj

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 实现选项卡

想要不使用js实现选项卡 css 也可以实现使用css3中的 input选中后的选择器:checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></titl...
复制链接

扫一扫