源码

<div class="tabs">
	<input type="radio" name="tabs" id="tabone" checked="checked">
	<label for="tabone">Tab One</label>
	<div class="tab">
		<h1>Tab One Content</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
			dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
			ea commodo consequat. </p>
		<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
			nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
			anim id est laborum.</p>
	</div>
	<input type="radio" name="tabs" id="tabtwo">
	<label for="tabtwo">Tab Two</label>
	<div class="tab">
		<h1>Tab Two Content</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
			dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
			ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
			nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
			anim id est laborum.</p>
	</div>
	<input type="radio" name="tabs" id="tabthree">
	<label for="tabthree">Tab Three</label>
	<div class="tab">
		<h1>Tab Three Content</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
	</div>
</div>

<style>
	.tabs {
		display: flex;
		flex-wrap: wrap; // make sure it wraps
	}
	.tabs label {
		order: 1; // Put the labels first
		display: block;
		padding: 1rem 2rem;
		margin-right: 0.2rem;
		cursor: pointer;
		background: #90CAF9;
		font-weight: bold;
		transition: background ease 0.2s;
	}
	.tabs .tab {
		order: 99; // Put the tabs last
		flex-grow: 1;
		width: 100%;
		display: none;
		padding: 1rem;
		background: #fff;
	}
	.tabs input[type="radio"] {
		display: none;
	}
	.tabs input[type="radio"]:checked+label {
		background: #fff;
	}
	.tabs input[type="radio"]:checked+label+.tab {
		display: block;
	}
	@media (max-width: 45em) {
		.tabs .tab,
		.tabs label {
			order: initial;
		}
		.tabs label {
			width: 100%;
			margin-right: 0;
			margin-top: 0.2rem;
		}
	}
	body {
		background: #eee;
		min-height: 100vh;
		box-sizing: border-box;
		padding-top: 10vh;
		font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
		font-weight: 300;
		line-height: 1.5;
		max-width: 60rem;
		margin: 0 auto;
		font-size: 112%;
	}
</style>

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/course/33_1581