纯CSS实现JS效果研究

利用CSS3:checked选择器和~配合实现tab切换

效果：

代码：

<style>
	body,div,input,label{
		margin:0;
		padding:0;
	}
	#tab>input{
		opacity:0;
		position:absolute;
		left:0;
		top:0;
	}
	#tab .label{
		overflow:hidden;
	}
	#tab .label>label{
		float:left;
		width:100px;
		height:30px;
		line-height:30px;
		border:1px solid #dedede;
		text-align:center;
		margin-left:-1px;
	}
	.content li{
		display:none;
	}

	input:nth-of-type(1):checked~.label>label:nth-of-type(1){
		background-color:red;
		color:#fff;
	}
	input:nth-of-type(2):checked~.label>label:nth-of-type(2){
		background-color:red;
		color:#fff;
	}
	input:nth-of-type(3):checked~.label>label:nth-of-type(3){
		background-color:red;
		color:#fff;
	}
	input:nth-of-type(1):checked~.content li:nth-of-type(1){
		display:block;
	}
	input:nth-of-type(2):checked~.content li:nth-of-type(2){
		display:block;
	}
	input:nth-of-type(3):checked~.content li:nth-of-type(3){
		display:block;
	}
</style>
<div id="tab">
	<input checked type="radio" name="name" id="name1">
	<input type="radio" name="name" id="name2">
	<input type="radio" name="name" id="name3">
	<div class="label">
		<label for="name1">选择1</label>
		<label for="name2">选择2</label>
		<label for="name3">选择3</label>
	</div>
	<div class="content">
		<ul>
			<li>内容1内容内容1内容1</li>
			<li>内容2内容内容2内容2</li>
			<li>内容3内容内容3内容3</li>
		</ul>
	</div>
</div>

原理就是点击label的时候就会选中input标签，然后通过CSS让当前选中的那个元素的对应内容显示就好了。

利用:target实现遮罩层效果

单击按钮的时候会弹出遮罩层，如果再点遮罩层的话就会把遮罩层给隐藏。

代码：

<style>
   #show{
      position:fixed;
      left:0;
      top:0;
      width:100%;
      height:100%;
      background-color:rgba(0,0,0,0.5);
      display:none;
   }
   a[href="#hide"]{
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:100%;
   }
   #hide:target{
    display:none;
   }
   #show:target{
    display:block;
   }
</style>

<a href="#show">显示</a>
<div id="hide">
  <div id="show">
    <a href="#hide"></a>
  </div>
</div>

长期更新...