在前端开发中，Tab 页是常见的页面布局方式之一。而 Material Design 是 Google 推出的一种设计风格，以平面化、简洁、直观的设计特点受到了广泛的欢迎。本文将介绍如何利用 JS/CSS 实现 Material Design 风格的 Tab 页，帮助开发者更好地实现这种页面布局。
实现思路
Material Design 风格的 Tab 页主要有以下特点：
- Tab 项之间的切换是无缝的，没有页面刷新的感觉。
- 当前选中的 Tab 项会有明显的高亮状态。
- Tab 项可以滚动，当超出容器宽度时，可以通过左右箭头进行滚动。
- Tab 项的宽度可以根据内容自适应。
基于以上特点，我们可以采用以下实现思路：
- 使用 HTML 结构实现 Tab 页的基本骨架。
- 使用 CSS 实现 Tab 项之间的样式，包括高亮状态、箭头、滚动等效果。
- 使用 JS 实现 Tab 项之间的切换效果。
HTML 结构
我们可以使用以下 HTML 结构实现 Tab 页的基本骨架：
-- -------------------- ---- -------
---- ----------------------
---- ----------------------- -----------------------------
---- ----------------------- ------------------------------
---- ------------------
---- --------------- -------------------- -------
---- -------------------- -------
---- -------------------- -------
---- --- ---
------
---- --------------------
---- --- - --- ---
------
---- --------------------
---- --- - --- ---
------
---- --------------------
---- --- - --- ---
------
---- --- ---
------其中，.tab-container 是整个 Tab 页的容器，.tab-scroll-arrow 是左右箭头的容器，.tab-items 是 Tab 项的容器，.tab-item 是每个 Tab 项的容器，.tab-item-active 是当前选中的 Tab 项，.tab-content 是每个 Tab 项对应的内容。
CSS 样式
Tab 项样式
为了实现 Material Design 风格的 Tab 项，我们需要对 Tab 项进行以下样式设置：
-- -------------------- ---- ------- --------- - -------- ------------- -------- ---- ----- ------- -------- ----------- ----- --- ------------ - --------------- - ------ -------- - ---------------- - ------ -------- ------------ ----- -
其中，.tab-item 是每个 Tab 项的容器，display: inline-block 表示 Tab 项在同一行显示，padding 控制 Tab 项的内边距，cursor: pointer 表示 Tab 项可以被点击，transition 控制 Tab 项的颜色变化动画，.tab-item:hover 表示鼠标悬停在 Tab 项上时的样式，.tab-item-active 表示当前选中的 Tab 项的样式。
左右箭头样式
为了实现 Tab 项的滚动效果，我们需要添加左右箭头，并对其进行以下样式设置：
-- -------------------- ---- ------- ----------------- - -------- ----- --------- --------- ---- ---- ---------- ----------------- ------ ----- ------- ----- ----------- -------------- --------- ------ ------- ---------------- -------- ------- -------- - ---------------------- - ----- -- -------------------- ---- ------- - ----------------------- - ------ -- -------------------- ----- ------- -
其中，.tab-scroll-arrow 是左右箭头的容器，display: none 表示默认隐藏，position: absolute 表示绝对定位，top: 50% 和 transform: translateY(-50%) 表示垂直居中，width 和 height 控制箭头的大小，background 控制箭头的背景图片和位置，cursor: pointer 表示箭头可以被点击，.tab-scroll-arrow-left 和 .tab-scroll-arrow-right 分别表示左箭头和右箭头的样式。
Tab 项滚动样式
为了实现 Tab 项的滚动效果，我们需要对 Tab 项容器进行以下样式设置：
-- -------------------- ---- ------- ---------- - ------------ ------- ----------- ----- --------------------------- ------ ------------------- ----- ---------------- ----- - ----------------------------- - -------- ----- -
其中，white-space: nowrap 表示 Tab 项在同一行显示，overflow-x: auto 表示当 Tab 项超出容器宽度时，自动显示水平滚动条，-webkit-overflow-scrolling: touch 表示在移动设备上使用滚动效果，-ms-overflow-style: none 和 scrollbar-width: none 表示隐藏滚动条，.tab-items::-webkit-scrollbar 表示对 Webkit 浏览器的滚动条进行样式设置。
Tab 项自适应样式
为了实现 Tab 项的自适应效果，我们需要对 Tab 项容器进行以下样式设置：
.tab-item {
flex-shrink: 0;
white-space: nowrap;
}其中，flex-shrink: 0 表示 Tab 项不缩小，white-space: nowrap 表示 Tab 项不换行。
JS 代码
为了实现 Tab 项之间的切换效果，我们需要使用 JS 代码实现以下功能：
- 点击 Tab 项时，切换到对应的内容。
- 点击左右箭头时，滚动到相应位置。
-- -------------------- ---- -------
-- ------
----- -------- - ---------------------------------------
----- ----------- - ------------------------------------------
----- ----------------- - -------------------------------------
----- ------------------ - -------------------------------------------------
----- ------------------- - --------------------------------------------------
-- -- --- ----
-------- ---------------- -
-- -- --- ----
--------------------- -- ------------------------------------------
-------------------------------------------------
-- -------
--------------------------- -- --------------------- - --------
-------------------------------- - --------
-
-- -- --- ----
----------------------- ------ -- -
------------------------------ -- -- -
-----------------
---
---
-- --------
-------------------------------------------- -- -- -
----------------------------
----- -----
--------- --------
---
---
-- --------
--------------------------------------------- -- -- -
----------------------------
----- ----
--------- --------
---
---其中，switchTab 函数用于切换 Tab 项和内容，tabItems.forEach 用于添加点击事件，tabScrollArrowLeft.addEventListener 和 tabScrollArrowRight.addEventListener 用于添加左右箭头的点击事件。
示例代码
最终的示例代码如下所示：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ------ --- --- ---------
-------
-------------- -
--------- ---------
------ -----
------- ------
----------------- --------
--------- -------
-
---------- -
------------ -------
----------- -----
--------------------------- ------
------------------- -----
---------------- -----
-
----------------------------- -
-------- -----
-
--------- -
-------- -------------
-------- ---- -----
------- --------
----------- ----- --- ------------
------------ --
------------ -------
-
--------------- -
------ --------
-
---------------- -
------ --------
------------ -----
-
------------ -
-------- -----
-------- -----
-
----------------- -
-------- -----
--------- ---------
---- ----
---------- -----------------
------ -----
------- -----
----------- -------------- --------- ------ -------
---------------- --------
------- --------
-
---------------------- -
----- --
-------------------- ---- -------
-
----------------------- -
------ --
-------------------- ----- -------
-
--------
-------
------
---- ----------------------
---- ----------------------- -----------------------------
---- ----------------------- ------------------------------
---- ------------------
---- --------------- -------------------- -------
---- -------------------- -------
---- -------------------- -------
---- -------------------- -------
---- -------------------- -------
---- -------------------- -------
---- -------------------- -------
---- -------------------- -------
---- -------------------- -------
---- -------------------- --------
---- -------------------- --------
---- -------------------- --------
---- -------------------- --------
---- -------------------- --------
---- -------------------- --------
---- -------------------- --------
---- -------------------- --------
---- -------------------- --------
---- -------------------- --------
---- -------------------- --------
------
---- ------------------- --------------- --------
------- - --------
----- --- - --------
------
---- --------------------
------- - --------
----- --- - --------
------
---- --------------------
------- - --------
----- --- - --------
------
---- --------------------
------- - --------
----- --- - --------
------
---- --------------------
------- - --------
----- --- - --------
------
---- --------------------
------- - --------
----- --- - --------
------
---- --------------------
------- - --------
----- --- - --------
------
---- --------------------
------- - --------
----- --- - --------
------
---- --------------------
------- - --------
----- --- - --------
------
---- --------------------
------- -- --------
----- --- -- --------
------
---- --------------------
------- -- --------
----- --- -- --------
------
---- --------------------
------- -- --------
----- --- -- --------
------
---- --------------------
------- -- --------
----- --- -- --------
------
---- --------------------
------- -- --------
----- --- -- --------
------
---- --------------------
------- -- --------
----- --- -- --------
------
---- --------------------
------- -- --------
----- --- -- --------
------
---- --------------------
------- -- --------
----- --- -- --------
------
---- --------------------
------- -- --------
----- --- -- --------
------
---- --------------------
------- -- --------
----- --- -- --------
------
---- --------------------
------- -- --------
----- --- -- --------
------
------
--------
----- -------- - ---------------------------------------
----- ----------- - ------------------------------------------
----- ----------------- - -------------------------------------
----- ------------------ - -------------------------------------------------
----- ------------------- - --------------------------------------------------
-------- ---------------- -
--------------------- -- ------------------------------------------
-------------------------------------------------
--------------------------- -- --------------------- - --------
-------------------------------- - --------
-
----------------------- ------ -- -
------------------------------ -- -- -
-----------------
---
---
-------------------------------------------- -- -- -
----------------------------
----- -----
--------- --------
---
---
--------------------------------------------- -- -- -
----------------------------
----- ----
--------- --------
---
---
---------
-------
-------总结
本文介绍了如何利用 JS/CSS 实现 Material Design 风格的 Tab 页。通过 HTML 结构、CSS 样式和 JS 代码的配合，我们可以实现无缝切换、高亮状态、滚动效果和自适应宽度等特点。希望本文对于前端开发者实现 Tab 页的布局方式有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65702293d2f5e1655d8cfc04