中国四大名著介绍 - HTML Tab 页面展示 - 常规

<!DOCTYPE html>
<html lang='zh-CN'>
<head>
	<meta charset='UTF-8'>
	<title>中国四大名著介绍 - HTML Tab 页面展示</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: #f1f1f1;
		}
<pre><code>	.container {
		width: 80%;
		margin: 0 auto;
		padding: 20px;
		background-color: #fff;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		border-radius: 5px;
	}
	
	.tab {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20px;
	}
	
	.tab button {
		background-color: #ddd;
		border: none;
		outline: none;
		cursor: pointer;
		padding: 10px 20px;
		font-size: 16px;
		flex: 1;
		margin-right: 10px;
	}
	
	.tab button.active {
		background-color: #4CAF50;
		color: #fff;
	}
	
	.tabcontent {
		display: none;
		padding: 20px;
	}
	
	.tabcontent.active {
		display: block;
	}
	
	h1 {
		font-size: 32px;
		margin-bottom: 20px;
	}
	
	p {
		line-height: 1.5;
		margin-bottom: 10px;
	}
	
	ul {
		margin-left: 20px;
		margin-bottom: 10px;
	}
	
	li {
		margin-bottom: 5px;
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<div class='container'>
		<h1>中国四大名著介绍</h1>
		<div class='tab'>
			<button class='tablinks active' onclick='openTab(event, 'honglou')'>红楼梦</button>
			<button class='tablinks' onclick='openTab(event, 'shuihu')'>水浒传</button>
			<button class='tablinks' onclick='openTab(event, 'xiyou')'>西游记</button>
			<button class='tablinks' onclick='openTab(event, 'sanguo')'>三国演义</button>
		</div>
		<div id='honglou' class='tabcontent active'>
			<p>《红楼梦》是中国文学史上一部长篇小说，被誉为中国古代小说的巅峰之作。</p>
			<ul>
				<li>作者：曹雪芹</li>
				<li>成书年代：18世纪中期</li>
				<li>主要人物：贾宝玉、林黛玉、薛宝钗、王熙凤等</li>
			</ul>
		</div>
		<div id='shuihu' class='tabcontent'>
			<p>《水浒传》是中国文学史上一部长篇小说，描写了北宋末年108位好汉在梁山泊聚义的故事。</p>
			<ul>
				<li>作者：施耐庵</li>
				<li>成书年代：14世纪末至15世纪初</li>
				<li>主要人物：宋江、林冲、鲁智深、武松等</li>
			</ul>
		</div>
		<div id='xiyou' class='tabcontent'>
			<p>《西游记》是中国文学史上一部长篇小说，描写了唐僧带领孙悟空、猪八戒、沙僧等人西天取经的故事。</p>
			<ul>
				<li>作者：吴承恩</li>
				<li>成书年代：16世纪末至17世纪初</li>
				<li>主要人物：唐僧、孙悟空、猪八戒、沙僧等</li>
			</ul>
		</div>
		<div id='sanguo' class='tabcontent'>
			<p>《三国演义》是中国文学史上一部长篇小说，描写了三国时期的历史事件以及各种英雄人物的故事。</p>
			<ul>
				<li>作者：罗贯中</li>
				<li>成书年代：14世纪末至15世纪初</li>
				<li>主要人物：刘备、关羽、张飞、曹操、孙权等</li>
			</ul>
		</div>
	</div>
	<script>
		function openTab(evt, tabName) {
			var i, tabcontent, tablinks;
			tabcontent = document.getElementsByClassName('tabcontent');
			for (i = 0; i < tabcontent.length; i++) {
				tabcontent[i].classList.remove('active');
			}
			tablinks = document.getElementsByClassName('tablinks');
			for (i = 0; i < tablinks.length; i++) {
				tablinks[i].classList.remove('active');
			}
			document.getElementById(tabName).classList.add('active');
			evt.currentTarget.classList.add('active');
		}
	</script>
</body>
</html>