Material Design 是 Google 推出的一种新型的视觉风格，它强调简洁、扁平、大胆的特点。其中，TabStrip 是一种常用的 UI 元素，可以在多个选项卡之间切换，实现多个信息块之间的切换。本文将介绍如何使用 HTML、CSS 和 JavaScript 来实现 Material Design 的 TabStrip 效果。
HTML 结构
先创建 HTML 结构，其中包含以下元素：
- 一个包含所有选项卡的容器，id 为 "tab-strip"；
- 多个选项卡，使用带有类名 "tab" 的 div 元素；
- 一个用于显示当前选项卡内容的容器，id 为 "tab-content"。
-- -------------------- ---- ------- ---- --------------- ---- ---------- ------- ------------------- ------- ---- ----------- ------------------- ------- ---- ----------- ------------------- ------- ------ ---- ----------------- ---- --------------- ------- ---------------------- -- --- ------- ---- ---------------- ---------------------- -- --- ------- ---- ---------------- ---------------------- -- --- ------- ------展开代码
CSS 样式
TabStrip 的样式可以使用 CSS 来实现。首先，将容器的样式设置为 flex 布局，使得选项卡横向排列。
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------------- -------------- ------------ ------- - ---- - ------- -------- ------------- ----- ---------- ----- ------------ ----- ------ ----- -展开代码
其次，为当前激活的选项卡和内容添加 active 类名，通过 active 类名修改样式。
-- -------------------- ---- ------- ----------- - ------ -------- -------------- --- ----- -------- - ---------------- - -------- ------ - --------- - -------- ----- -展开代码
最后，为选项卡添加 hover 效果。这里使用了 transition 属性来实现平滑的过渡效果。
.tab:hover { text-decoration: underline; transition: color 0.2s ease-in-out; }
JavaScript 逻辑
选项卡的切换需要 JavaScript 实现。当选项卡被点击时，切换到相应的内容，并且激活当前选项卡。为选项卡添加 click 事件监听器来完成这个功能。
-- -------------------- ---- ------- ----- ---- - ---------------------------------- ----- ---------- - --------------------------------------- ------------------ -- - ----------------------------- --- -- - ------------------ -- - ------------------------------- --- ---------------------------- ----- ----- - ----------------------------- ------------------------ -- - ------------------------------- --- ----- ---------------- - ----------------------------------------- ----------------------------------------- --- ---展开代码
完整示例代码
下面是完整的代码实现：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------------- ------------ ------- ---------- - -------- ----- ---------- ----- ---------------- -------------- ------------ ------- - ---- - ------- -------- ------------- ----- ---------- ----- ------------ ----- ------ ----- - ----------- - ------ -------- -------------- --- ----- -------- - ---------- - ---------------- ---------- ----------- ----- ---- ------------ - ---------------- - -------- ------ - --------- - -------- ----- - -------- ------- ------ ---- --------------- ---- ---------- ------- ------------------- ------- ---- ----------- ------------------- ------- ---- ----------- ------------------- ------- ------ ---- ----------------- ---- --------------- ------- ---------------------- -- --- ------- ---- ---------------- ---------------------- -- --- ------- ---- ---------------- ---------------------- -- --- ------- ------ -------- ----- ---- - ---------------------------------- ----- ---------- - --------------------------------------- ------------------ -- - ----------------------------- --- -- - ------------------ -- - ------------------------------- --- ---------------------------- ----- ----- - ----------------------------- ------------------------ -- - ------------------------------- --- ----- ---------------- - ----------------------------------------- ----------------------------------------- --- --- --------- ------- -------展开代码
该示例代码实现了 Material Design 的 TabStrip 效果，可以方便地切换选项卡内容。使用该示例代码可以方便地学习和理解 TabStrip 的实现原理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b84e75306f20b3a65fafbd
