四大名著介绍 - HTML & CSS 实现 Tab 页面切换 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>四大名著介绍 - Tab 页面切换</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: #f2f2f2;
		}
		h1 {
			text-align: center;
			margin-top: 50px;
		}
		.tab {
			display: inline-block;
			margin-top: 30px;
			margin-left: 50px;
			background-color: #333;
			color: #fff;
			padding: 10px;
			cursor: pointer;
			border-radius: 5px 5px 0 0;
		}
		.tab.active {
			background-color: #fff;
			color: #333;
		}
		.tab-content {
			display: none;
			padding: 20px;
			background-color: #fff;
			border-radius: 0 0 5px 5px;
			box-shadow: 0 2px 5px rgba(0,0,0,0.3);
		}
		.tab-content.active {
			display: block;
		}
		.book-image {
			display: block;
			margin: 20px auto;
			max-width: 100%;
		}
	</style>
</head>
<body>
	<h1>四大名著介绍</h1>
	<div class='tab-container'>
		<div class='tab active' data-tab='1'>'红楼梦'</div>
		<div class='tab' data-tab='2'>'西游记'</div>
		<div class='tab' data-tab='3'>'水浒传'</div>
		<div class='tab' data-tab='4'>'三国演义'</div>
	</div>
	<div class='tab-content-container'>
		<div class='tab-content active' data-tab='1'>
			<h2>'红楼梦'</h2>
			<p>'红楼梦' 是清代作家曹雪芹所著的一部长篇小说，被誉为中国古代小说的巅峰之作。小说以贾宝玉等人的生活为主线，描绘了封建社会后期官宦贵族家庭的生活和衰败。小说中的人物形象丰满，言语精练，情节曲折，被后人誉为“文学艺术的百科全书”。</p>
			<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Hongloumeng.jpg/220px-Hongloumeng.jpg' alt='红楼梦封面' class='book-image'>
		</div>
		<div class='tab-content' data-tab='2'>
			<h2>'西游记'</h2>
			<p>'西游记' 是明代小说家吴承恩所著的一部神魔小说，描写了孙悟空等人保护唐朝僧人取经西天，历经千辛万苦的故事。小说中有众多神魔妖怪，情节跌宕起伏，语言幽默生动，被誉为中国古代小说的经典之作。</p>
			<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Journey_to_the_West.jpg/220px-Journey_to_the_West.jpg' alt='西游记封面' class='book-image'>
		</div>
		<div class='tab-content' data-tab='3'>
			<h2>'水浒传'</h2>
			<p>'水浒传' 是明代小说家施耐庵所著的一部历史小说，讲述了宋江等梁山好汉起义反抗封建统治的故事。小说中有众多英雄豪杰，情节曲折离奇，语言生动活泼，被誉为中国古代小说的杰作之一。</p>
			<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Shu%C4%ADh%C3%B2uzhu%C3%A0n.jpg/220px-Shu%C4%ADh%C3%B2uzhu%C3%A0n.jpg' alt='水浒传封面' class='book-image'>
		</div>
		<div class='tab-content' data-tab='4'>
			<h2>'三国演义'</h2>
			<p>'三国演义' 是元代小说家罗贯中所著的一部历史小说，描绘了三国时期各路英雄人物的兴衰史。小说中有众多英雄豪杰，情节跌宕起伏，语言生动有力，被誉为中国古代小说的经典之作。</p>
			<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Sanguo_yanyi.jpg/220px-Sanguo_yanyi.jpg' alt='三国演义封面' class='book-image'>
		</div>
	</div>
	<script>
		// 获取所有的tab和tab-content元素
		var tabs = document.querySelectorAll('.tab');
		var tabContents = document.querySelectorAll('.tab-content');
		// 给每个tab添加点击事件
		for (var i = 0; i < tabs.length; i++) {
			tabs[i].addEventListener('click', function() {
				// 获取当前tab的data-tab属性值
				var tabId = this.getAttribute('data-tab');
				// 隐藏所有的tab-content元素
				for (var j = 0; j < tabContents.length; j++) {
					tabContents[j].classList.remove('active');
				}
				// 显示对应的tab-content元素
				document.querySelector('[data-tab='' + tabId + '']').classList.add('active');
				// 将当前tab设为active状态，其他的tab取消active状态
				for (var k = 0; k < tabs.length; k++) {
					tabs[k].classList.remove('active');
				}
				this.classList.add('active');
			});
		}
	</script>
</body>
</html>