选项卡的实现的几种方法

今天总结一下页面中选项卡实现的几种方法。在实战中会经常的使用到。下面的方法都是纯HTML+CSS，并没有用到JS，JS日后补上。

一、使用：target属性实现选项卡

       页面的结构：（html）

<div class="parent">	<a href="#div1">选项卡1</a><a href="#div2">选项卡2</a>	<div id="div1">		<p>选项卡1的内容</p>	</div>	<div id="div2">		<p>选项卡2的内容</p>	</div></div>注意：这里要注意内联元素在元代码中若有回车，则在页面中会出现选项卡的标题之间有一个缝隙，所以如上所示，两个a标签连着写。
       页面的CSS：
      *{		margin:0;		padding:0;	}	body{		padding:20px;	}	div.parent{		position:relative;	}	a{		border:1px solid #ccc;		padding:10px;		line-height:40px;		background:#ffa;		color:#000;		text-decoration:none;		position:relative;		z-index:3;	}	div.parent > div{		width:300px;		height:200px;		border:1px solid #ccc;		background:#ffa;		position:absolute;		top:38px;		left:0px;		z-index:2;		display:none;	}	div.parent > div:target{		display:block;	}此方法的缺点是在不考虑浏览器的兼容问题的情况下，它无法控制选中的选项卡相对应的样式变化。并且地址栏也会出现相对应的div的id/
运行的结果：
二、使用：checked属性实现选项卡
       页面结构：
       <ul class="tabs">		<li>			<input type="radio" name="tabs" id="tab1" checked/>			<label for="tab1">选择卡1</label>			<div class="tab_content" id="tab_content1">				<p>选项卡1的内容</p>			</div>		</li>		<li>			<input type="radio" name="tabs" id="tab2"/>			<label for="tab2">选择卡2</label>			<div class="tab_content" id="tab_content2">				<p>选项卡2的内容</p>			</div>		</li>	</ul>页面的CSS：
      *{		margin:0;		padding:0;		list-style:none;		box-sizing:border-box;	}	body{		padding:20px;	}	.tabs{		width:650px;		position:relative;		background:#aaf;	}	.tabs li{		float:left;	}	.tabs input[type=radio]{/*隐藏单选框的样式*/		position:absolute;		top:-9999px;		left:-9999px;	}	.tabs label{		display:block;		border:1px solid #000;		padding:10px;		text-align:center;		border-radius:6px 6px 0 0 ;		background:#aaf;		border-bottom:1px solid transparent;		position:relative;		top:4px;		z-index:3;		transition:all 0.2s ease-in-out;	}	.tabs label:hover{		background:#bbf;	}	.tabs .tab_content{		width:100%;		background:#faf;		height:200px;		position:absolute;		top:43px;		left:0px;		z-index:2;		border:1px solid #000;		padding:10px;		display:none;	}	.tabs input[type=radio]:checked + label{		top:0px;		padding-top:14px;		background:#faf;	}	.tabs input[type=radio]:checked ~ div[id^=tab_content]{		display:block;	}此处注意要把单选框的样式隐藏起来，不要在页面中显示。此方法相对于上面的方法做出了一些改进，使得我们可以控制选中的样式，但是由于采用了CSS3的属性，对于不兼容CSS3的浏览器来说就不能用了。
运行的结果：