js tab效果的实现代码

让我们来详细讲解"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函数来给每个标签增加点击事件,并在事件处理函数中实现以下功能:

  1. 清除已选中标签的样式。我们通过classList属性和remove函数来实现。
  2. 选中当前标签。我们通过getAttribute函数来获取当前标签的data-tab属性值,从而确定选中的标签。然后,我们通过classList属性和add函数来改变其样式。
  3. 刷新内容页。我们先获取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()语句。这条语句的作用是模拟点击第一个标签,从而实现默认选中效果。

3.总结

到此,我们已经完成了从标签HTML定义到JavaScript实现Tab切换效果的全过程,希望能够抛砖引玉,让大家进一步了解和学习JavaScript的奥妙。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js tab效果的实现代码 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • javascript表单验证使用示例(javascript验证邮箱)

    下面就为您详细讲解“javascript表单验证使用示例(javascript验证邮箱)”的完整攻略。 一、表单验证的基本原理 表单验证是指对用户提交的表单数据进行校验,以保证数据的合法性和完整性。在前端开发中,常用的表单验证方式包括: HTML表单验证:利用HTML表单的标准属性和属性值,来对表单数据进行校验和限制; javascript表单验证:利用ja…

    JavaScript 2023年6月10日
    00
  • 深入剖析JavaScript中的函数currying柯里化

    深入剖析JavaScript中的函数currying柯里化 什么是柯里化? 柯里化 (Currying),又称部分求值 (Partial Evaluation),是一种把接收多个参数的函数变换成接收一个单一参数 (最初函数的第一个参数) 的函数,并返回一个新函数的过程。新函数接收余下的参数,并返回原函数需要返回的结果。 举个例子,下面这个简单的函数: fun…

    JavaScript 2023年5月27日
    00
  • vue-router后台鉴权流程实现

    下面我将为你详细讲解“vue-router后台鉴权流程实现”的完整攻略。 背景 Vue.js 是一款轻量级的前端框架,而 Vue Router 是 Vue.js 的官方路由库。在 Vue.js 应用开发中,Vue Router 经常被用于实现前端路由管理,来实现 SPA(单页应用)应用。但是,在实际开发中,我们常常需要做到前端用户权限管理,来保护我们的业务安…

    JavaScript 2023年6月11日
    00
  • Native.js屏幕截图实例代码

    下面我来详细讲解“Native.js屏幕截图实例代码”的完整攻略。 前置知识 在讲解本文的主要内容之前,我们需要掌握两个知识点: Native.js Native.js 是一个将 JavaScript 源代码编译成本地机器码的编译器,这样可以将 JavaScript 的运行速度提高数倍。 HTML5 Canvas HTML5 Canvas API 提供了一种…

    JavaScript 2023年6月11日
    00
  • javascript动态添加、修改、删除对象的属性与方法详解

    JavaScript动态添加、修改、删除对象的属性与方法详解 在JavaScript中,我们可以随时通过操作对象的属性和方法来动态地改变对象的行为。这篇文章将详细讲解如何添加、修改和删除对象的属性与方法。 1. 添加属性 我们可以通过两种方式为对象添加属性:点表示法和方括号表示法。 1.1 点表示法 点表示法是最常见的一种添加属性的方式,它将属性名作为对象的…

    JavaScript 2023年5月27日
    00
  • JS中LocalStorage与SessionStorage五种循序渐进的使用方法

    LocalStorage和SessionStorage是HTML5中提供的本地存储技术,可用于存储一些少量的数据(5-10MB左右),用于客户端浏览器处理一些无需进行服务器数据交互的场景。在JavaScript中,我们可以使用以下五种方法来使用LocalStorage和SessionStorage。 1. 存储数据 LocalStorage和SessionS…

    JavaScript 2023年6月11日
    00
  • 现代 javscript 编程 资料第2/6页

    我们来详细解析“现代JavaScript编程资料第2/6页”的完整攻略吧。 背景介绍 这份资料是介绍现代 JavaScript 编程的,旨在帮助初学者快速入门并熟练掌握现代 JavaScript 的相关技术和特性。 攻略步骤 以下是学习该资料的详细攻略步骤: 1. 熟悉资料结构 该资料的第2/6页主要介绍了以下内容: ES6 模块化 Promises 迭代器…

    JavaScript 2023年6月10日
    00
  • js 取时间差去掉周六周日实现代码

    要计算时间差并去掉周六周日,我们可以使用 JavaScript 内置的 Date 对象,它提供了许多方法来处理日期和时间。以下是实现这个功能的步骤: 获取开始时间和结束时间的 Date 对象。 我们可以使用 Date 对象的构造函数来创建具有指定日期和时间的日期对象。例如,我们可以这样创建一个代表 2021 年 1 月 1 日的 Date 对象:new Da…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部