纯CSS,label+input+section实现tab功能

非常简易实用的代码，并没有华丽丽的效果，也没有华丽丽的代码。

一切为了实用！

<style>
	html,
	body {
		height: 100%;
	}
	
	body {
		font: 14px/1 'Open Sans', sans-serif;
		color: #555;
		background: #eee;
	}
	
	h1 {
		padding: 50px 0;
		font-weight: 400;
		text-align: center;
	}
	
	p {
		margin: 0 0 20px;
		line-height: 1.5;
	}
	
	main {
		min-width: 320px;
		max-width: 800px;
		padding: 50px;
		margin: 0 auto;
		background: #fff;
	}
	
	section {
		display: none;
		padding: 20px 0 0;
		border-top: 1px solid #ddd;
	}
	
	input {
		display: none;
	}
	
	label {
		display: inline-block;
		margin: 0 0 -1px;
		padding: 15px 25px;
		font-weight: 600;
		text-align: center;
		color: #bbb;
		border: 1px solid transparent;
	}
	
	label:before {
		font-family: fontawesome;
		font-weight: normal;
		margin-right: 10px;
	}
	
	label[for*='1']:before {
		content: '\f1cb';
	}
	
	label[for*='2']:before {
		content: '\f17d';
	}
	
	label[for*='3']:before {
		content: '\f16b';
	}
	
	label[for*='4']:before {
		content: '\f1a9';
	}
	
	label:hover {
		color: #888;
		cursor: pointer;
	}
	
	input:checked + label {
		color: #555;
		border: 1px solid #ddd;
		border-top: 2px solid orange;
		border-bottom: 1px solid #fff;
	}
	
	#tab1:checked ~ #content1,
	#tab2:checked ~ #content2,
	#tab3:checked ~ #content3,
	#tab4:checked ~ #content4 {
		display: block;
	}
	
	@media screen and (max-width: 650px) {
		label {
			font-size: 0;
		}
		label:before {
			margin: 0;
			font-size: 18px;
		}
	}
	
	@media screen and (max-width: 400px) {
		label {
			padding: 15px;
		}
	}
</style>
<h1>Tommy bad bad</h1>
<main>

	<input id="tab1" type="radio" name="tabs" checked>
	<label for="tab1">1</label>

	<input id="tab2" type="radio" name="tabs">
	<label for="tab2">2</label>

	<input id="tab3" type="radio" name="tabs">
	<label for="tab3">3</label>

	<input id="tab4" type="radio" name="tabs">
	<label for="tab4">4</label>

	<section id="content1">
		<p>
			1
		</p>
		<p>
			1
		</p>
	</section>

	<section id="content2">
		<p>
			2
		</p>
		<p>
			2
		</p>
	</section>

	<section id="content3">
		<p>
			3
		</p>
		<p>
			3
		</p>
	</section>

	<section id="content4">
		<p>

			4

		</p>
		<p>

			4
		</p>
	</section>

</main>