网站选项卡怎么制作（Javascript选项卡制作教程）

拼才会有未来

已于 2023-12-05 15:13:50 修改

阅读量726

点赞数 8

分类专栏：前端/css/html/js 文章标签： javascript 前端

于 2023-12-05 15:10:28 首次发布

本文链接：https://blog.csdn.net/QQ183718318/article/details/134807968

版权

前端/css/html/js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

要制作一个带有选项卡的网站，您可以使用HTML和CSS来构建页面的基本结构，并使用JavaScript来添加交互功能。

以下是一个简单的JavaScript选项卡制作教程：

一、HTML代码：

<!DOCTYPE html>
<html>
<head>
  <title>选项卡教程</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>选项卡教程</h1>
  <p>在这个教程中，我们将创建一个带有选项卡功能的简单网页。用户可以点击不同的选项卡，加载并显示相应的内容。</p>

  <div class="tab-container">
    <!-- 选项卡按钮 -->
    <button class="tab" data-content="tab1">选项卡1</button>
    <button class="tab" data-content="tab2">选项卡2</button>
    <button class="tab" data-content="tab3">选项卡3</button>
  </div>

  <!-- 内容区域 -->
  <div id="tab1" class="content">
    <h2>选项卡1内容</h2>
    <p>这里是选项卡1的内容。</p>
  </div>

  <div id="tab2" class="content">
    <h2>选项卡2内容</h2>
    <p>这里是选项卡2的内容。</p>
  </div>

  <div id="tab3" class="content">
    <h2>选项卡3内容</h2>
    <p>这里是选项卡3的内容。</p>
  </div>

  <script src="script.js"></script>
</body>
</html>

二、CSS代码（保存为styles.css文件）：

/* 选项卡容器样式 */
.tab-container {
  display: flex; /* 水平排列选项卡按钮 */
  justify-content: center; /* 居中对齐 */
  padding: 10px; /* 内边距 */
  background-color: #f2f2f2; /* 背景颜色 */
}

/* 选项卡按钮样式 */
.tab {
  cursor: pointer; /* 鼠标指针变为手型 */
  padding: 10px; /* 内边距 */
  margin-right: 10px; /* 外边距 */
  border-bottom: 2px solid transparent; /* 底部边框 */
}

/* 鼠标悬停时的选项卡按钮样式 */
.tab:hover {
  border-bottom: 2px solid #4CAF50; /* 底部边框颜色 */
}

/* 内容区域样式 */
.content {
  display: none; /* 默认隐藏内容区域 */
  padding: 10px; /* 内边距 */
}

三、JavaScript代码（保存为script.js文件）：

// 获取所有的选项卡按钮和内容区域元素
const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.content');

// 为每个选项卡按钮添加点击事件监听器
tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 获取当前选项卡按钮对应的内容区域ID
    const contentId = tab.dataset.content;
    // 遍历所有的内容区域元素，根据ID显示或隐藏对应的内容区域
    contents.forEach(content => {
      if (content.id === contentId) {
        content.style.display = 'block'; // 显示对应的内容区域
      } else {
        content.style.display = 'none'; // 隐藏其他的内容区域
      }
    });
  });
});