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实现的select点菜功能示例

    下面是JavaScript实现的select点菜功能示例的完整攻略: 概述 在Web开发中,经常需要实现一些具有选择性质的功能,比如点菜、物品选择等。这时候我们可以使用select元素结合JavaScript来实现。 HTML结构 首先,我们需要在HTML中定义一个select元素,用于用户选择不同的选项。具体代码如下: <select id=&quo…

    JavaScript 2023年6月10日
    00
  • 分享19个JavaScript 有用的简写写法

    下面为您详细讲解“分享19个JavaScript 有用的简写写法”的完整攻略。 前言 JavaScript 是目前应用广泛的编程语言之一,对于初学者来说,熟练使用一些简写写法可以提高编码效率,降低调试成本。本文将分享19个 JavaScript 有用的简写写法,方便开发者们在使用 JavaScript 过程中更加高效、便捷地完成编码工作。 内容 1. Ter…

    JavaScript 2023年5月19日
    00
  • 代理模式在vue中的使用示例解析

    接下来我将为您详细讲解“代理模式在Vue中的使用示例解析”的完整攻略: 什么是代理模式? 代理模式是设计模式的一种,它通过使用一个代理对象来控制原始对象的访问权限,从而可以在不改变原始对象的情况下,添加额外的功能或控制访问权限。代理对象通常充当中介者的角色,客户端与代理交互,并由代理将请求发送到实际的对象,代理还可以处理请求,如缓存、验证、记录日志等。 在V…

    JavaScript 2023年6月11日
    00
  • 这段js代码得节约你多少时间

    这段JS代码节约了很多处理数组的时间。具体是通过使用Array.reduce()方法来将数组中的元素合并成一个值,从而避免了使用循环操作数组的需要,大大提高了代码效率。 下面是完整的攻略: 1. 理解 Array.reduce() 方法 Array.reduce() 方法是 JavaScript 数组常用的高阶函数之一,它对数组中的所有元素进行迭代,并将它们…

    JavaScript 2023年5月27日
    00
  • javascript函数的4种调用方式与this的指向

    如下是关于“javascript函数的4种调用方式与this的指向”的完整攻略: 1. 函数调用 在javascript中,最基本的函数调用方式就是函数调用。当一个函数作为普通函数调用时,函数内的this指向全局对象window。例如: function sayHello() { console.log("Hello " + this.n…

    JavaScript 2023年5月28日
    00
  • js日期相关函数总结分享

    JS日期相关函数总结分享 简介 日期在前端开发中非常常见,JavaScript原生提供了许多日期相关的函数,本文将会总结下这些相关函数。 获取Date对象 获取Date对象可以使用以下几个方式: new Date() 使用new Date()方式获取Date对象,可以获取当前日期时间。 const now = new Date(); // 获取当前日期 co…

    JavaScript 2023年5月27日
    00
  • 浅谈Javascript 执行顺序

    浅谈JavaScript 执行顺序 在JavaScript中,代码执行的顺序可以影响到程序的执行结果。具体来说,程序在执行时会按照一定的顺序依次执行各个语句。本文将深入讲解JavaScript中的执行顺序。 代码执行阶段 代码执行阶段可以分为两个阶段: 解析阶段 执行阶段 其中,解析阶段是将代码转化成抽象语法树(AST),并进行语义分析,确定变量、函数等的声…

    JavaScript 2023年5月18日
    00
  • JS正则截取两个字符串之间及字符串前后内容的方法

    让我来为您详细讲解“JS正则截取两个字符串之间及字符串前后内容的方法”的完整攻略。 正则截取两个字符串之间 如果您需要截取两个字符串中间的内容,可以使用正则表达式来完成。使用正则表达式的match方法,可以传入一个正则表达式,返回匹配到的字符串数组。 示例: const str = ‘hello world, my name is Jack’; const …

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