HTML Tab 页面展示四大名著 - 互动式介绍 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>四大名著介绍 - 交互式 Tab 页面</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: #f2f2f2;
		}
		.container {
			margin: 50px auto;
			max-width: 800px;
			background-color: #fff;
			box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
			padding: 20px;
			border-radius: 10px;
		}
		.tab {
			display: inline-block;
			padding: 10px;
			margin-right: 10px;
			cursor: pointer;
			border-radius: 5px 5px 0 0;
			background-color: #eee;
		}
		.tab.active {
			background-color: #fff;
			border-bottom: 2px solid #000;
		}
		.tab-content {
			display: none;
			padding: 20px;
		}
		.tab-content.active {
			display: block;
		}
		h2 {
			margin-top: 0;
		}
		p {
			line-height: 1.5;
		}
	</style>
</head>
<body>
	<div class='container'>
		<div class='tab-container'>
			<div class='tab active' data-target='hongloumeng'>红楼梦</div>
			<div class='tab' data-target='shuihuzhuan'>水浒传</div>
			<div class='tab' data-target='xiyouji'>西游记</div>
			<div class='tab' data-target='sanguoyanyi'>三国演义</div>
		</div>
		<div class='tab-content-container'>
			<div class='tab-content active' data-tab='hongloumeng'>
				<h2>《红楼梦》</h2>
				<p>《红楼梦》是清代作家曹雪芹所著的长篇小说，也是中国古代小说的巅峰之作。小说以贾、史、王、薛四大家族的兴衰为背景，描写了贾宝玉、林黛玉等人的爱情悲剧和封建家族的腐败。</p>
			</div>
			<div class='tab-content' data-tab='shuihuzhuan'>
				<h2>《水浒传》</h2>
				<p>《水浒传》是明代小说家施耐庵所著的长篇小说，描写了以宋江为首的108位好汉在抗击官府的过程中的故事。小说以揭露封建统治阶级的黑暗和腐败为主题，展现了民间的英雄气概和反抗精神。</p>
			</div>
			<div class='tab-content' data-tab='xiyouji'>
				<h2>《西游记》</h2>
				<p>《西游记》是明代小说家吴承恩所著的长篇小说，讲述了孙悟空、猪八戒、沙和尚、唐僧四人西天取经的故事。小说融合了佛、道、儒等思想，充满了幽默、诙谐的语言和情节。</p>
			</div>
			<div class='tab-content' data-tab='sanguoyanyi'>
				<h2>《三国演义》</h2>
				<p>《三国演义》是元代小说家罗贯中所著的长篇小说，以东汉末年到三国时期的历史为背景，描写了曹操、刘备、孙权等人的政治斗争和战争故事。小说以揭露封建统治阶级黑暗和腐败为主题，展现了普通民众的英雄气概和反抗精神。</p>
			</div>
		</div>
	</div>
<pre><code>&lt;script&gt;
	// 获取所有tab元素
	var tabs = document.querySelectorAll('.tab');
	// 获取所有tab-content元素
	var tabContents = document.querySelectorAll('.tab-content');

	// 给每个tab元素添加点击事件
	tabs.forEach(function(tab) {
		tab.addEventListener('click', function() {
			// 获取当前点击的tab的data-target属性值
			var target = this.getAttribute('data-target');

			// 遍历所有tab-content元素
			tabContents.forEach(function(tabContent) {
				// 获取当前tab-content元素的data-tab属性值
				var tabContentTarget = tabContent.getAttribute('data-tab');

				// 如果当前tab-content元素的data-tab属性值等于当前点击的tab的data-target属性值，则添加active类，否则移除active类
				if (target === tabContentTarget) {
					tabContent.classList.add('active');
				} else {
					tabContent.classList.remove('active');
				}
			});

			// 遍历所有tab元素
			tabs.forEach(function(tab) {
				// 如果当前tab元素等于当前点击的tab，则添加active类，否则移除active类
				if (tab === this) {
					tab.classList.add('active');
				} else {
					tab.classList.remove('active');
				}
			}, this);
		});
	});
&lt;/script&gt;
</code></pre>
</body>
</html>