中国四大名著 Tab 页面展示 - 简洁、书香气息 - 常规

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>中国四大名著</title>
  <style>
    body {
      background-image: url('https://images.pexels.com/photos/3707996/pexels-photo-3707996.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
      background-size: cover;
      background-position: center;
      font-family: 'Microsoft YaHei', sans-serif;
      color: #333;
    }
<pre><code>.tab {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  margin-top: 50px;
}

.tab button {
  background-color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 20px;
  font-size: 18px;
  margin-right: 10px;
  border-radius: 5px 5px 0 0;
  transition: all 0.3s ease;
}

.tab button:hover {
  background-color: #f2f2f2;
}

.tab button.active {
  background-color: #f2f2f2;
}

.tabcontent {
  display: none;
  padding: 20px;
  background-color: #f2f2f2;
  border-radius: 0 5px 5px 5px;
}

.tabcontent p {
  line-height: 1.8;
  font-size: 16px;
}
</code></pre>
  </style>
</head>
<body>
  <h1 style="text-align: center;">中国四大名著</h1>
  <div class="tab">
    <button class="active" onclick="openTab(event, 'honglou')">《红楼梦》</button>
    <button onclick="openTab(event, 'xiyouji')">《西游记》</button>
    <button onclick="openTab(event, 'shuihuzhuan')">《水浒传》</button>
    <button onclick="openTab(event, 'sanguoyanyi')">《三国演义》</button>
  </div>
  <div id="honglou" class="tabcontent" style="display: block;">
    <h2>《红楼梦》</h2>
    <p>《红楼梦》是清代作家曹雪芹所著的一部长篇小说，被誉为中国古典小说的巅峰之作。小说以贾宝玉、林黛玉等人物为主线，通过对贾府的描写，以及对封建家族、宗法制度、贵族生活等方面的反映，揭示了封建社会的黑暗和腐朽，表达了作者对人生的思考和对现实的不满。</p>
  </div>
  <div id="xiyouji" class="tabcontent">
    <h2>《西游记》</h2>
    <p>《西游记》是中国古代小说的经典之作，全书共分为一百回，讲述了唐僧师徒四人历经九九八十一难，取得真经的故事。小说通过描写唐僧、孙悟空、猪八戒、沙悟净等人物的形象，表现了人性的善恶、有无、真伪等方面的思考，体现了作者对人性的深刻认识。</p>
  </div>
  <div id="shuihuzhuan" class="tabcontent">
    <h2>《水浒传》</h2>
    <p>《水浒传》是明代小说家施耐庵所著的一部长篇小说，以宋江、林冲、鲁智深等一百零八个好汉的故事为主线，描绘了他们的斗争经历和人物形象。小说通过对封建社会的批判，表现了人民群众对压迫和剥削的反抗精神，具有很高的文学和历史价值。</p>
  </div>
  <div id="sanguoyanyi" class="tabcontent">
    <h2>《三国演义》</h2>
    <p>《三国演义》是中国历史小说的代表作之一，全书共分为一百二十回，讲述了从东汉末年到西晋初年三国时期的历史故事。小说通过对曹操、刘备、孙权等人物的形象描写，表现了中国古代的政治、军事、文化等方面的情况，具有很高的历史和文学价值。</p>
  </div>
  <script>
    function openTab(evt, tabName) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
      document.getElementById(tabName).style.display = "block";
      evt.currentTarget.className += " active";
    }
  </script>
</body>
</html>