请你使用html写一个tab页面介绍四大名著当鼠标移动到对应的tab时进行换页
<!DOCTYPE html>
<html>
<head>
<title>四大名著介绍</title>
<style type="text/css">
.tab {
display: none;
}
<pre><code> .active {
display: block;
}
.tab-btn {
background-color: #f1f1f1;
border: none;
color: black;
padding: 10px 20px;
cursor: pointer;
display: inline-block;
}
.tab-btn:hover {
background-color: #ddd;
}
</style>
</code></pre>
</head>
<body>
<h1>四大名著介绍</h1>
<div>
<button class="tab-btn" onclick="openTab(event, 'honglou')">《红楼梦》</button>
<button class="tab-btn" onclick="openTab(event, 'shuihu')">《水浒传》</button>
<button class="tab-btn" onclick="openTab(event, 'sanguo')">《三国演义》</button>
<button class="tab-btn" onclick="openTab(event, 'xiyou')">《西游记》</button>
</div>
<div id="honglou" class="tab active">
<h2>《红楼梦》</h2>
<p>《红楼梦》是清代作家曹雪芹创作的小说，被誉为中国古代小说的巅峰之作。小说以贾、史、王、薛四大家族的兴衰为主线，揭示了封建社会的丑恶和虚伪。小说中的人物形象生动，语言精练，被誉为中华文化的瑰宝之一。</p>
</div>
<div id="shuihu" class="tab">
<h2>《水浒传》</h2>
<p>《水浒传》是明代小说家施耐庵创作的小说，描写了一群农民起义领袖在抗击封建统治的斗争中的故事。小说中的人物形象鲜明，情节曲折，风趣幽默，被誉为中国古代小说的杰作。</p>
</div>
<div id="sanguo" class="tab">
<h2>《三国演义》</h2>
<p>《三国演义》是元代小说家罗贯中创作的小说，描写了三国时期各种政治斗争、战争和英雄人物的故事。小说中的人物形象栩栩如生，情节曲折跌宕，被誉为中国古代小说的经典之作。</p>
</div>
<div id="xiyou" class="tab">
<h2>《西游记》</h2>
<p>《西游记》是明代小说家吴承恩创作的小说，描写了孙悟空带领唐僧取经的故事。小说中充满神话传说和民间故事，人物形象生动，情节曲折，被誉为中国古代小说的经典之作。</p>
</div>
<script type="text/javascript">
function openTab(evt, tabName) {
var i, tab, tabBtn;
tab = document.getElementsByClassName("tab");
for (i = 0; i < tab.length; i++) {
tab[i].className = tab[i].className.replace(" active", "");
}
tabBtn = document.getElementsByClassName("tab-btn");
for (i = 0; i < tabBtn.length; i++) {
tabBtn[i].className = tabBtn[i].className.replace(" active", "");
}
document.getElementById(tabName).className += " active";
evt.currentTarget.className += " active";
}
</script>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/hcgQ 著作权归作者所有。请勿转载和采集!