简单纯js实现点击切换TAB标签实例

在前端开发中，经常需要实现 TAB 标签的切换效果。本文将介绍一种简单纯 JavaScript 实现点击切换 TAB 标签的方法，并提供示例代码。

HTML 结构

首先，我们需要在 HTML 中创建一个包含所有 TAB 标签的容器，并为每个标签设置一个唯一的 ID。例如：

---- -------------------
  ---- --------- --------------- -------
  ---- --------- --------------- -------
  ---- --------- --------------- -------
------

其中，tab-container 是整个 TAB 标签的容器，tab 类用于样式控制。

接下来，在 HTML 中创建一个与 TAB 标签对应的内容容器，并为每个容器设置一个唯一的 ID。例如：

---- -----------------------
  ---- ------------- ----------------------- -------
  ---- ------------- ----------------------- -------
  ---- ------------- ----------------------- -------
------

其中，content-container 是整个内容容器的父级容器，content 类用于样式控制。

CSS 样式

我们需要为 TAB 标签和内容容器添加一些基本的 CSS 样式。例如：

---- -
  -------- -------------
  -------- -----
  ------- --- ----- -----
  ------- --------
-

------- -
  ----------------- -----
-

-------- -
  -------- -----
  -------- -----
  ------- --- ----- -----
-

----- -
  -------- ------
-

其中，.tab 类定义了 TAB 标签的样式，.active 类定义了当前选中标签的样式，.content 类定义了容器的样式，.show 类定义了当前显示内容的样式。

JavaScript 实现

在 JavaScript 中，我们需要为每个 TAB 标签添加点击事件，并控制相应的内容容器的显示和隐藏。例如：

--- ---- - ----------------------------------
--- -------- - --------------------------------------

--- ---- - - -- - - ------------ ---- -
  --------------------------------- ---------- -
    -- --------
    --- ---- - - -- - - ---------------- ---- -
      -------------------------------------
    -

    -- ---- --- -------
    --- ---- - - -- - - ------------ ---- -
      -----------------------------------
    -

    -- ---- --- ---------
    --- ------ - --------------------
    ------------------------------------------------------

    -- ---- --- -------
    -----------------------------
  ---
-

首先，我们通过 querySelectorAll 方法获取所有 TAB 标签和内容容器。然后，为每个 TAB 标签添加点击事件，当点击 TAB 标签时，我们先隐藏所有的内容容器，再取消所有 TAB 标签的激活状态。接着，根据当前点击的 TAB 标签的 data-target 属性，获取对应的内容容器，并将其显示出来。最后，将当前点击的 TAB 标签设置为激活状态。

完整示例代码

--------- -----
------

------
  ----- ----------------
  ---------- ----------
  -------
    ---- -
      -------- -------------
      -------- -----
      ------- --- ----- -----
      ------- --------
    -

    ------- -
      ----------------- -----
    -

    -------- -
      -------- -----
      -------- -----
      ------- --- ----- -----
    -

    ----- -
      -------- ------
    -
  --------
-------

------

---------------------------------------------------------- ----------
-------------------------------------------------------------------------------------
阅读全文

猜你喜欢

  • javascript自定义in_array()函数实现方法

    JavaScript自定义in_array()函数实现方法 在 JavaScript 中，通常使用 Array.includes() 方法来检查一个元素是否存在于数组中。

    8 年前
  • 如何用js 实现依赖注入的思想，后端框架思想搬到前端来

    如何用 JavaScript 实现依赖注入的思想 依赖注入是在软件开发中广泛使用的一种设计模式，它允许将一个对象的依赖项从该对象本身解耦出来。这使得代码更加灵活、可维护和易于测试。

    8 年前
  • javascript实现输出指定行数正方形图案的方法

    JavaScript实现输出指定行数正方形图案的方法 在前端开发中，经常需要用到绘制各种图案的功能。本文将介绍如何使用JavaScript实现输出指定行数正方形图案的方法，并提供示例代码。

    8 年前
  • 函数window.open实现关闭所有的子窗口

    使用 window.open 函数关闭所有子窗口 在前端开发中，经常需要打开多个子窗口来展示不同的页面内容。但是有时候需要一次性关闭所有这些子窗口，这时可以使用 window.open 函数来实现。

    8 年前
  • Javascript实现鼠标右键特色菜单

    在前端开发中，实现鼠标右键特色菜单是一个比较常见的需求。本文将介绍如何使用Javascript来实现鼠标右键特色菜单，并提供示例代码和指导意义。 实现原理 要实现鼠标右键特色菜单，需要监听鼠标右键事件...

    8 年前
  • javascript控制图片播放的实现代码

    JavaScript控制图片播放的实现代码 在Web开发中，图片轮播是一种常见的需求。使用JavaScript可以实现自动播放图片的功能，本文将介绍如何使用JavaScript控制图片播放，并提供示例...

    8 年前
  • jq实现左侧显示图片右侧文字滑动切换效果

    用 jQuery 实现左侧显示图片右侧文字滑动切换效果 在前端网页设计中，经常需要实现图片和文本的切换展示效果。本篇文章将介绍使用 jQuery 实现左侧显示图片右侧文字滑动切换效果的方法，并提供详细...

    8 年前
  • javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码

    用 JavaScript 和 HTML5 Canvas 实现七夕情人节 3D 玫瑰花效果 在这篇文章中，我们将学习如何使用 JavaScript 和 HTML5 的 Canvas 实现一个 3D 玫瑰...

    8 年前
  • 基于Jquery实现表单验证

    基于 jQuery 实现表单验证 前端表单验证是网页开发的重要组成部分，可以有效减少用户输入不规范带来的问题，同时提高用户体验。在本文中，我们将介绍如何使用 jQuery 实现表单验证，并给出详细的示...

    8 年前
  • JavaScript数组各种常见用法实例分析

    JavaScript 数组是一种非常常见的数据结构，它可以存储多个值，并且支持各种操作。在本文中，我们将会详细介绍 JavaScript 数组的各种常见用法，包括创建数组、添加元素、删除元素、排序、合...

    8 年前
  • Javascript实现可旋转的圆圈实例代码

    Javascript 实现可旋转的圆圈实例代码 在前端开发中，我们经常需要实现交互性质的UI元素，例如滑块、拖拽等。本文将介绍如何使用 Javascript 实现可旋转的圆圈，同时涵盖了对于矩阵变换的...

    8 年前
  • JavaScript实现选择框按比例拖拉缩放的方法

    在前端开发中，经常需要对页面元素进行拖拉缩放的操作。本文将介绍一种基于JavaScript实现的选择框按比例拖拉缩放的方法。 实现思路 选择框按比例拖拉缩放的实现思路如下： 获取选择框和其所在容器的...

    8 年前
  • JavaScript仿静态分页实现方法

    在前端开发中，分页功能是非常常见的需求。通常情况下，我们使用后端提供的分页接口，然后通过 AJAX 请求数据并渲染到页面上。但是，在某些场景下，可能需要通过 JavaScript 实现仿静态分页的效果...

    8 年前
  • JavaScript运动减速效果实例分析

    在前端开发中，页面动态效果的展示是非常重要的。其中一种经典的动态效果就是运动减速效果。本文将详细介绍如何使用JavaScript实现这一效果，并提供示例代码和指导意义。

    8 年前
  • js实现简易的单数字随机抽奖（0-9）

    JS实现简易的单数字随机抽奖（0-9） 在前端开发中，经常需要实现一些抽奖或者随机生成数字的功能。本篇文章介绍如何使用JavaScript实现一个简易的单数字随机抽奖，范围为0到9。

    8 年前
  • javascript记住用户名和登录密码（两种方式）

    JavaScript 记住用户名和登录密码的两种方式 在开发网站或应用程序时，许多用户需要经常输入他们的用户名和密码。为了提高用户体验，我们可以通过在用户登录后记住他们的用户名和密码来简化登录流程。

    8 年前
  • jquery控制显示服务器生成的图片流

    使用 jQuery 控制显示服务器生成的图片流 在前端开发中，经常需要从服务器获取图片并将其显示在网页上。本文将介绍如何使用 jQuery 控制显示服务器生成的图片流。

    8 年前
  • JS实现转动随机数抽奖的特效代码

    在前端开发中，经常需要实现各种炫酷的特效来增强用户体验。其中一种常见的特效是转动随机数抽奖，比如大家熟知的支付宝集五福活动中的抽奖转盘。 实现这种特效的关键就是要掌握如何使用 JavaScript 控...

    8 年前
  • 基于js实现投票的实例代码

    基于 JavaScript 实现投票的实例代码 在前端开发中，经常需要实现投票功能。在本文中，我们将介绍如何使用 JavaScript 实现一个简单的投票应用程序。

    8 年前
  • JavaScript采用递归算法计算阶乘实例

    JavaScript递归算法计算阶乘实例 阶乘（factorial）是指一个正整数 n，它的阶乘表示为 n!，表示从 1 到 n 的所有正整数相乘的积。例如，5! = 5 * 4 * 3 * 2 * ...

    8 年前

相关推荐

    暂无文章