js tab效果的实现代码

2023年6月10日下午5:38 • JavaScript

让我们来详细讲解"js tab效果的实现代码"的完整攻略。

1. 理解Tab切换效果

Tab切换效果是指点击页面上的不同标签页，页面的显示内容随之改变，以达到切换页面内容的效果。我们通过JavaScript来实现这种效果，通常包含以下几个部分：

标签栏：包含多个标签的容器
内容栏：多个不同的内容页，与标签一一对应
切换函数：用于实现标签栏的点击事件，实现标签切换以及内容页的刷新

有了Tab切换效果的理解，我们就可以开始实现代码。

2. 实现Tab切换效果的代码

2.1 HTML部分

首先，我们需要定义一个标签栏和内容栏，具体如下：

<div class="tab">
  <div class="tab-header">
    <div class="tab-item active" data-tab="tab1">Tab 1</div>
    <div class="tab-item" data-tab="tab2">Tab 2</div>
    <<div class="tab-item" data-tab="tab3">Tab 3</div>
  </div>
  <div class="tab-content">
    <div class="tab-pane active" data-tab="tab1">Tab 1 Content</div>
    <div class="tab-pane" data-tab="tab2">Tab 2 Content</div>
    <div class="tab-pane" data-tab="tab3">Tab 3 Content</div>
  </div>
</div>

其中，data-tab属性用于标记当前选中的标签页，具体实现在JavaScript部分讲解。

2.2 CSS部分

为了让Tab切换效果更美观，我们需要对标签和内容进行样式设置。具体如下：

.tab .tab-header {
  display: flex;
}
.tab .tab-item {
  margin-right: 10px;
  cursor: pointer;
}
.tab .tab-item.active {
  border-bottom: 2px solid #333;
}
.tab .tab-content .tab-pane {
  display: none;
}
.tab .tab-content .tab-pane.active {
  display: block;
}

其中，我们通过display属性来控制标签和内容的显示与隐藏，通过border属性来实现当前选中标签的下划线效果。

2.3 JavaScript部分

最后，我们来到主角JavaScript的部分。具体实现如下：

//获取标签和内容
const tabHeaders = document.querySelectorAll(".tab-item");
const tabPanes = document.querySelectorAll(".tab-pane");

//标签栏点击事件
tabHeaders.forEach((header) => {
  header.addEventListener("click", () => {
    //清除已选中样式
    document.querySelector(".tab-item.active").classList.remove("active");
    document.querySelector(".tab-pane.active").classList.remove("active");

    //选中当前标签
    const tabSelected = header.getAttribute("data-tab");
    header.classList.add("active");
    document.querySelector(`.tab-pane[data-tab=${tabSelected}]`).classList.add("active");
  });
});

首先，我们通过querySelectorAll函数来获取标签栏和内容栏中的元素。然后，我们通过forEach函数来给每个标签增加点击事件，并在事件处理函数中实现以下功能：

清除已选中标签的样式。我们通过classList属性和remove函数来实现。
选中当前标签。我们通过getAttribute函数来获取当前标签的data-tab属性值，从而确定选中的标签。然后，我们通过classList属性和add函数来改变其样式。
刷新内容页。我们先获取data-tab属性值，然后通过querySelector函数选中对应内容页，最后通过classList属性和add函数来改变其样式实现内容页的切换。

2.4 示例说明

下面，我们通过两个例子来说明如何实现Tab切换效果。

2.4.1 示例1：按索引切换Tab

有时候我们会需要按照Tab的索引来切换内容，这时候可以通过以下代码实现：

//获取标签和内容
const tabHeaders = document.querySelectorAll(".tab-item");
const tabPanes = document.querySelectorAll(".tab-pane");

//标签栏点击事件
tabHeaders.forEach((header,index) => {
  header.addEventListener("click", () => {
    //清除已选中样式
    document.querySelector(".tab-item.active").classList.remove("active");
    document.querySelector(".tab-pane.active").classList.remove("active");

    //选中当前标签
    const tabSelected = index + 1;
    header.classList.add("active");
    document.querySelector(`.tab-pane:nth-of-type(${tabSelected})`).classList.add("active");
  });
});

其中，我们利用forEach默认传入的第2个参数index来表示当前标签的索引。因为index基于0开始，所以我们需要在最后选中的索引值上加1.

2.4.2 示例2：初始选中默认Tab

有时候我们需要让某个Tab在刚加载页面时就选中，这时候可以通过以下代码实现：

//获取标签和内容
const tabHeaders = document.querySelectorAll(".tab-item");
const tabPanes = document.querySelectorAll(".tab-pane");

//标签栏点击事件
tabHeaders.forEach((header) => {
  header.addEventListener("click", () => {
    //清除已选中样式
    document.querySelector(".tab-item.active").classList.remove("active");
    document.querySelector(".tab-pane.active").classList.remove("active");

    //选中当前标签
    const tabSelected = header.getAttribute("data-tab");
    header.classList.add("active");
    document.querySelector(`.tab-pane[data-tab=${tabSelected}]`).classList.add("active");
  });
});

//默认选中第1个标签
tabHeaders[0].click();

其中，我们在标签栏点击事件的下面，新增了一个tabHeaders[0].click()语句。这条语句的作用是模拟点击第一个标签，从而实现默认选中效果。