正文

HTML5 选项卡源码示例

/0 浏览量
0418

选项卡是网页设计中常用的一种交互元素，它允许用户通过点击不同的标签来切换不同的内容区域。以下是一个HTML5选项卡的简单示例，其中包含了CSS和JavaScript代码，用于实现一个基本的选项卡效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML5 选项卡示例</title>
<style>
  /* 选项卡样式 */
  .tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f1f1f1;
  }

  .tabs li {
    float: left;
  }

  .tabs li a {
    display: block;
    color: #333;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  .tabs li a:hover {
    background-color: #ddd;
  }

  /* 内容区域样式 */
  .tab-content {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
  }

  /* 默认显示第一个内容区域 */
  .tab-content.active {
    display: block;
  }
</style>
</head>
<body>

<ul class="tabs">
  <li><a href="#tab1">选项卡1</a></li>
  <li><a href="#tab2">选项卡2</a></li>
  <li><a href="#tab3">选项卡3</a></li>
</ul>

<div id="tab1" class="tab-content active">
  <h3>内容区域1</h3>
  <p>这里是第一个内容区域的文本。</p>
</div>

<div id="tab2" class="tab-content">
  <h3>内容区域2</h3>
  <p>这里是第二个内容区域的文本。</p>
</div>

<div id="tab3" class="tab-content">
  <h3>内容区域3</h3>
  <p>这里是第三个内容区域的文本。</p>
</div>

<script>
  // JavaScript 用于切换选项卡内容
  document.addEventListener('DOMContentLoaded', function () {
    var tabs = document.querySelectorAll('.tabs a');
    var contents = document.querySelectorAll('.tab-content');

    for (var i = 0; i < tabs.length; i++) {
      tabs[i].addEventListener('click', function (event) {
        event.preventDefault();
        var target = this.getAttribute('href').substring(1);

        // 隐藏所有内容区域
        for (var j = 0; j < contents.length; j++) {
          contents[j].classList.remove('active');
        }

        // 显示当前点击的选项卡对应的内容区域
        document.getElementById(target).classList.add('active');
      });
    }
  });
</script>

</body>
</html>

这段代码展示了如何使用HTML、CSS和JavaScript创建一个简单的选项卡组件：

  1. HTML部分定义了选项卡的结构，包括一个无序列表（<ul>）和列表项（<li>），以及三个内容区域（<div>）。

  2. CSS部分设置了选项卡的基本样式，包括背景颜色、文本颜色、边框等。

  3. JavaScript部分用于响应用户点击事件，并切换显示对应的内容区域。当用户点击一个选项卡时，所有内容区域会被隐藏，只有与点击的选项卡对应的区域会被显示出来。

你可以将上述代码保存为HTML文件，然后用浏览器打开它来查看效果。如果你需要对样式或功能进行修改，可以直接在CSS和JavaScript代码中进行调整。

-- 展开阅读全文 --