用JavaScript创建一个简单的选项卡功能

Creating a plain tabbing functionality with plain JavaScript

本文关键字：简单 选项 功能 一个 创建 JavaScript      更新时间：2023-09-26

我想知道如何在纯JavaScript中创建像jQuery UI提供的选项卡功能。我真的不知道它是怎么做的，因为主要原因是我无法理解它!

所以，基本上我需要帮助的是关于我能够创建功能的逻辑。

有些事情我无法理解，比如，一旦单击选项卡，如何将样式从一个元素(选项卡)转移到另一个元素?前一个标签如何失去它的风格，而其他得到相同的风格?我知道他们实际上在切换classes，但是怎么切换呢?

类似地，当一个选项卡被单击时，列表是如何显示的，当另一个选项卡被单击时，它隐藏，另一个显示。我真的不明白样式变换背后的逻辑。

DynamicDrive有一个例子。这有帮助吗?

DynamicDrive Tab Tutorial

我会这样做:

  1. 查看jQueryUi的选项卡控件(或DynamicDrive或YUI或Bootstrap或其他)的说明。
  2. 观察这些容器的HTML是如何构建的。
    3. 在你的页面上复制这个HTML结构
  3. 查找W3C或Mozilla关于用javascript创建事件处理程序的文档，在HTML中的tab元素中添加"onClick"，无论是动态的，还是通过"onClick"HTML属性
  4. 查找有关如何使用javascript操作HTML元素的样式或类属性的W3C或其他文档，通过onclick事件将其应用于您的选项卡。

如果你想更花哨一点的话，这里有大量关于javascript的文档

相关文章：