html css js 实现Tab标签页示例代码

HTML、CSS、JS 实现 Tab 标签页是前端开发中常见的应用场景，可以通过实现 Tab 标签页来实现页面的切换和内容展示。下面我将详细讲解 HTML、CSS、JS 实现 Tab 标签页的攻略：

HTML 页面结构

在 HTML 中，每个 Tab 页都可以用一个 div 元素来表示，其中每个 div 元素要包含一个与之相对应的唯一标识符 ID 和相应的内容。

<div class="tabs">
  <div class="tab" id="tab1">Tab 1</div>
  <div class="tab" id="tab2">Tab 2</div>
  <div class="tab" id="tab3">Tab 3</div>
</div>
<div class="tab-content" id="tab1-content">
  This is content of tab 1.
</div>
<div class="tab-content" id="tab2-content">
  This is content of tab 2.
</div>
<div class="tab-content" id="tab3-content">
  This is content of tab 3.
</div>

上面代码片段中，我们首先定义了一个 div 元素来表示 Tab 标签页，每个 Tab 页面用一个 div 来表示，它们都有一个唯一的 id 标识符，用于 JS 代码控制 Tab 的展现。然后定义了三个 div 元素来表示每个 Tab 所对应的内容，它们也都有唯一标识符，便于在 JS 中控制显示与隐藏。

CSS 样式

我们需要设置 Tab 标签页和对应的内容的样式，让它们能够在页面中良好地展现出来。

.tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}

.tab {
  padding: 10px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tab:hover {
  border-bottom: 2px solid #ccc;
}

.tab.active {
  border-bottom: 2px solid #333;
}

.tab-content {
  display: none;
  padding: 20px;
}

.tab-content.active {
  display: block;
}

上面代码片段中，我们先设置了 .tabs 和 .tab-content 的样式，然后定义了 .tab 和 .tab:hover 的样式，分别用于表示 Tab 标签页和鼠标悬停时的效果。.tab.active 和 .tab-content.active 的样式用于表示当前激活的 Tab 和对应的内容。

JS 控制

实现功能的核心部分在于 JavaScript 代码段，需要用 JS 代码实现点击 Tab 时，根据 Tab id 显示对应的内容，并隐藏其他内容。

const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-content');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    const tabId = tab.getAttribute('id');
    const activeTab = document.querySelector('.active');
    const activeTabContent = document.querySelector('.tab-content.active');

    activeTab.classList.remove('active');
    activeTabContent.classList.remove('active');
    tab.classList.add('active');
    document.getElementById(`${tabId}-content`).classList.add('active');
  });
});

上面代码片段中，我们首先取到所有的 .tab 元素和 .tab-content 元素，然后循环遍历所有 .tab 元素，将点击事件添加到 .tab 上。对于每个 .tab 元素，我们获取到其 id，然后移除所有前面激活的元素类名，给当前激活的 .tab 和对应的 .tab-content 添加 active 类名，实现页面上对应 Tab 隐藏与展现。

示例说明

示例1

在实际的项目中，可以根据自己的实际需求调整 HTML 结构和样式。例如，在 Tab 标签页中增加二级导航、按钮等附加控件。

<div class="tabs">
  <div class="tab" id="web">Web</div>
  <div class="tab" id="app">App</div>
  <div class="tab" id="service">Service</div>
  <div class="nav">
    <a href="" class="nav-item">More Web</a>
    <a href="" class="nav-item">More App</a>
    <a href="" class="nav-item">More Service</a>
  </div>
</div>

<div class="tab-content" id="web-content">
  <h3>Web Development</h3>
  <p>Web development is the work involved in developing a website for the Internet.</p>
</div>
<div class="tab-content" id="app-content">
  <h3>App Development</h3>
  <p>Mobile app development is the act or process by which a mobile app is developed for mobile devices.</p>
</div>
<div class="tab-content" id="service-content">
  <h3>Service Development</h3>
  <p>Service development is developing a software that provides a function for the network or distributed environment.</p>
</div>

上面代码片段中，在原有的 Tab 标签页基础之上，我们加入了 .nav 元素和 .nav-item 元素，用于表示每个 Tab 的更多功能。也可以根据需要再次增加不同类型的元素。

示例2

还可以通过接口或配置文件方式，动态生成 Tab，并通过 AJAX 请求异步加载对应内容。例如，在我们的博客页面中，Tab 标签页需要显示最热、最新、分类等不同维度的文章列表，我们可以通过 Django 模板渲染，配合 Ajax 请求动态生成 Tab 界面。

<div class="tabs" id="article-tabs">
  {% for tab in tabs %}
  <div class="tab" id="{{ tab.id }}">{{ tab.name }}</div>
  {% endfor %}
</div>

<div class="tab-content" id="latest-content">
  {% include 'latest_articles.html' %}
</div>

{% for tab in tabs %}
<div class="tab-content" id="{{ tab.id }}-content" class="article-list">
  <div class="loading">Loading...</div>
</div>
{% endfor %}

<script>
  $(document).ready(function() {
    $('#article-tabs .tab').on('click', function() {
      const tabId = $(this).attr('id');
      //异步加载数据并插入HTML
      $.ajax({
        type: 'get',
        url: `/articles/${tabId}/`,
        success: function(data) {
          $(`#${tabId}-content`).html(data);
        }
      });
    });
  });
</script>

上面代码片段中，我们使用 Django 模板和 for 循环语句动态渲染了 Tab 界面和内容部分，每个 Tab 对应一个包含 id、name 等属性的数据对象。在页面 ready 之后给每个 .tab 元素添加点击事件，根据 id 发起 Ajax 请求异步加载对应的内容，然后插入到对应的 .tab-content 元素中。

总之，在 HTML、CSS 和 JS 三个方面努力，我们可以实现灵活多样的 Tab 标签页展示效果。