请你使用html写一个tab页面介绍四大名著当鼠标移动到对应的tab时进行换页再写一个css使得页面和图片看着更舒服
<!DOCTYPE html>
<html>
<head>
<title>四大名著介绍</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
原文地址: https://www.cveoy.top/t/topic/hchh 著作权归作者所有。请勿转载和采集!