选项卡的实现的几种方法

今天总结一下页面中选项卡实现的几种方法。在实战中会经常的使用到。下面的方法都是纯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的浏览器来说就不能用了。

运行的结果：