在 Material Design 风格的应用中，浮动标签页是一个常见的设计模式。它可以更好地展示不同内容之间的关系，提供更直观的用户体验。本文将介绍如何使用 HTML、CSS 和 JavaScript 实现 Material Design 风格下的浮动标签页。
HTML 结构
首先，我们需要定义 HTML 的结构。我们可以使用一个包含所有标签页的容器 div，每个标签页是一个单独的 div 元素。每个标签页都应该包含一个标题和一个内容区域。
-- -------------------- ---- -------
---- -------------
---- ---------- --------
------- ------
---- --------------------
------- -- --- ------- -- --- ------
------
------
---- ------------
------- ------
---- --------------------
------- -- --- ------- -- --- ------
------
------
---- ------------
------- ------
---- --------------------
------- -- --- ------- -- --- ------
------
------
------在这个示例中，我们有三个标签页：Tab 1、Tab 2 和 Tab 3。第一个标签页默认是激活状态（.active）。
CSS 样式
接下来，我们需要定义 CSS 样式。我们将使用 Flexbox 布局来实现标签页的布局和对齐。
-- -------------------- ---- ------- ----- - -------- ----- --------------- ---- ---------------- ----------- ------------ -------- ------ ----- - ---- - -------- ----- --------------- ------- ---------------- ------- ------------ ------- -------- ----- ------- --- ----- ----- ----------------------- ---- ------------------------ ---- ------- -------- --------- --------- ----------- --- ---- ------------ ----------------- ----- -------- -- - ----------- - -------- -- -------------- ----- ----------------- -------- - ---- -- - ------- -- - ------------ - -------- ----- ------- --- ----- ----- ----------- ----- -------------------------- ---- --------------------------- ---- --------- --------- ---- ----- ----- -- ------ ----- ----------------- ----- -------- -- ----------- - --- --- ------- -- -- ----- -------- -- ----------- ------- ---------- -------------- ----- --- ----------- --- ---- ------------------- ------ ----- ------- - ----------- ------------ - -------- -- -------- -- ----------- -------- ---------- -------------- -- --- -
这些样式会将标签页的容器 .tabs 设为 Flexbox 容器，所有的标签页 .tab 设置为 Flexbox 项。我们还定义了 .active 类，它用来标记激活状态的标签页。注意 .tab 和 .tab-content 组件的基础样式。
JavaScript 交互
最后，我们需要使用 JavaScript 代码添加交互行为。我们需要为每个标签页的标题添加 click 事件监听器，并在点击标题时切换标签页的状态。以下是示例代码：
-- -------------------- ---- -------
----- ---- - ----------------------------------
------------------ -- -
----------------------------- -- -- -
----- --------- - --------------------------------------
-------------------------------------
----- ------------- - ----------------------------------------
--------------------------- - ----
------------------------------ - ---------
----------------------------- - --------------- ----- ----
----------------------------
----- ------- - ----------------------------------
--------------------- - ----
------------------------ - ----------
----------------------- - --------------- -- ----
---
---这段代码会遍历所有的标签页，给每个标签页的标题添加 click 事件监听器。当用户点击标签页标题时，它会将当前激活的标签页的状态设置为非激活状态（.active），然后将被点击的标签页的状态设置为激活状态（.active）。
当标签页状态发生变化时，我们使用 CSS 动画来显示或隐藏内容区域。我们使用 opacity、visibility 和 transform 属性来设置动画效果，transform 属性用来获取硬件加速。
总结
在本文中，我们介绍了如何使用 HTML、CSS 和 JavaScript 实现 Material Design 风格下的浮动标签页。我们使用了 Flexbox 布局来对齐标签页，使用 CSS 动画来显示或隐藏内容区域。通过这个示例，你可以更好地理解浮动标签页的实现方法，并在实际开发中应用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6499047048841e98945f6a9f