利用 JS/CSS 实现 Material Design 风格的 Tab 页

在前端开发中，Tab 页是常见的页面布局方式之一。而 Material Design 是 Google 推出的一种设计风格，以平面化、简洁、直观的设计特点受到了广泛的欢迎。本文将介绍如何利用 JS/CSS 实现 Material Design 风格的 Tab 页，帮助开发者更好地实现这种页面布局。

实现思路

Material Design 风格的 Tab 页主要有以下特点：

  • Tab 项之间的切换是无缝的，没有页面刷新的感觉。
  • 当前选中的 Tab 项会有明显的高亮状态。
  • Tab 项可以滚动，当超出容器宽度时，可以通过左右箭头进行滚动。
  • Tab 项的宽度可以根据内容自适应。

基于以上特点，我们可以采用以下实现思路：

  1. 使用 HTML 结构实现 Tab 页的基本骨架。
  2. 使用 CSS 实现 Tab 项之间的样式，包括高亮状态、箭头、滚动等效果。
  3. 使用 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 项容器进行以下样式设置：

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

其中，flex-shrink: 0 表示 Tab 项不缩小，white-space: nowrap 表示 Tab 项不换行。

JS 代码

为了实现 Tab 项之间的切换效果，我们需要使用 JS 代码实现以下功能：

  1. 点击 Tab 项时，切换到对应的内容。
  2. 点击左右箭头时，滚动到相应位置。
-- ------
----- -------- - ---------------------------------------
----- ----------- - ------------------------------------------
----- ----------------- - -------------------------------------
----- ------------------ - -------------------------------------------------
----- ------------------- - --------------------------------------------------

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

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

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

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

其中，switchTab 函数用于切换 Tab 项和内容，tabItems.forEach 用于添加点击事件，tabScrollArrowLeft.addEventListener 和 tabScrollArrowRight.addEventListener 用于添加左右箭头的点击事件。

示例代码

最终的示例代码如下所示：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

总结

本文介绍了如何利用 JS/CSS 实现 Material Design 风格的 Tab 页。通过 HTML 结构、CSS 样式和 JS 代码的配合，我们可以实现无缝切换、高亮状态、滚动效果和自适应宽度等特点。希望本文对于前端开发者实现 Tab 页的布局方式有所帮助。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65702293d2f5e1655d8cfc04

阅读全文

猜你喜欢

  • Vue.js 中如何实现 keep-alive 缓存组件

    在 Vue.js 中，我们经常需要在不同的页面或组件之间切换。有时候，我们希望在切换回之前访问过的页面或组件时能够保留之前的状态，而不是每次都重新加载。这时候，就可以使用 Vue.js 提供的 kee...

    10 个月前
  • Hapi：如何使用 Hapi 的状态管理插件

    Hapi 是一个强大的 Node.js Web 框架，它提供了许多有用的插件来帮助开发者构建高效、可扩展的 Web 应用程序。其中一个非常有用的插件是状态管理插件，在本文中，我们将详细讨论如何使用 H...

    10 个月前
  • Webpack 使用插件 DllPlugin 的方法

    前言 Webpack 是一个非常流行的前端打包工具，可以将多个模块打包成一个或多个文件，方便前端开发和部署。但是，在项目中使用 Webpack 时，我们会遇到一些性能问题，比如构建时间太长、每次构建都...

    10 个月前
  • Node.js 实现文件上传和下载的完整教程

    随着互联网的发展，文件上传和下载已经成为了我们日常工作中不可或缺的一部分。在前端开发中，我们常常需要实现文件上传和下载的功能。本文将介绍如何使用 Node.js 实现文件上传和下载的完整教程，包括详细...

    10 个月前
  • Redux-Form 之一：无法正常工作

    Redux-Form 是一个 React 表单库，它可以帮助开发者在 React 中更容易地管理表单数据和状态。Redux-Form 的设计和实现都非常优秀，但在实际使用中可能会遇到一些问题，比如无法...

    10 个月前
  • Headless CMS 在在线教育中的应用

    在现代化的在线教育系统中，内容管理系统（CMS）是一个至关重要的组件。它可以让教育者轻松管理和发布课程、学习材料和其他相关内容。然而，传统的CMS往往存在一些限制，比如对于内容的展示形式、前端体验等方...

    10 个月前
  • JavaScript ES9 技术入门

    JavaScript ES9（ECMAScript 2018）是 JavaScript 语言的最新版本，它增加了一些新的特性和功能，使得开发者可以更加高效地编写 JavaScript 代码。

    10 个月前
  • 如何使用 Chai 中的 TDD 风格进行测试驱动开发

    测试驱动开发（TDD）是一种软件开发方法，它要求在编写代码之前先编写测试用例。这种方法可以帮助开发人员确保代码的质量和可靠性，并且可以提高开发效率。在前端开发中，使用 TDD 的方法可以帮助我们更加高...

    10 个月前
  • 使用 Next.js 和 React Hook Form 构建动态表单

    在前端开发中，表单是一个非常常见的组件。而对于动态表单，我们需要根据不同的需求来动态生成表单项，这时候就需要一个高效的工具来帮助我们快速构建动态表单。在本文中，我们将介绍如何使用 Next.js 和 ...

    10 个月前
  • 如何在 React Native 项目中使用 ESLint

    ESLint 是一个 JavaScript 代码检查工具，可以帮助开发者在编写代码时遵循一定的规范和最佳实践。在 React Native 项目中使用 ESLint 可以提高代码质量和可维护性，本文将...

    10 个月前
  • ECMAScript 2020 中字符串的 matchAll 方法使用详解

    在 ECMAScript 2020 中，字符串新增了一个 matchAll 方法，该方法可以将字符串与正则表达式匹配的所有结果返回为一个迭代器对象，方便进行多次匹配操作。

    10 个月前
  • 自动化性能测试工具 jMeter 的使用技巧

    前言 在软件开发生命周期中，性能测试是一个至关重要的环节。它可以帮助开发团队发现系统中的瓶颈和性能问题，从而提高系统的可靠性和稳定性。在进行性能测试时，使用自动化性能测试工具可以大大提高测试效率和准确...

    10 个月前
  • MongoDB 中使用 $lookup 操作符进行联表查询的方法介绍

    在 MongoDB 中，$lookup 操作符是一种非常强大的工具，它可以实现多个集合之间的联表查询。在前端开发中，我们经常需要查询多个集合之间的数据，这时候 $lookup 就能派上用场了。

    10 个月前
  • ES6 中的异步编程

    在现代 Web 开发中，异步编程已经成为了必不可少的技能。ES6 提供了一些新的语言特性，使得异步编程变得更加简单和优雅。本文将介绍 ES6 中的异步编程相关特性，并提供示例代码帮助读者更好地理解和应...

    10 个月前
  • Koa2 如何实现 GraphQL 和 Socket.io

    在现代 Web 开发中，GraphQL 和 Socket.io 已经成为前端开发中不可或缺的技术。在 Koa2 中，我们可以通过一些简单的步骤来实现这两种技术的应用。

    10 个月前
  • 解决 Tailwind CSS 中字重度量问题的技巧

    在使用 Tailwind CSS 进行前端开发时，我们经常会遇到字重度量不准确的问题，例如在使用 font-bold 样式时，字重可能会过重或过轻，影响页面的美观度和阅读体验。

    10 个月前
  • 大前端时代，如何打造高可用的 SPA 应用？

    随着 Web 技术的不断发展，越来越多的企业开始将前端开发视为重点。特别是 SPA（Single Page Application），其能够提供更好的用户体验，成为了现代 Web 应用的主流。

    10 个月前
  • 解读 ES12 中的 String.prototype.matchAll()

    在 ES12 中，新增了一个 String.prototype.matchAll() 方法，该方法可以用于在字符串中全局匹配正则表达式，并返回一个迭代器对象，其中包含所有匹配结果的详细信息。

    10 个月前
  • ES6，ES7 和 ES8 特性及实例

    随着前端技术的不断发展，JavaScript 也在不断地更新迭代。其中，ES6、ES7 和 ES8 是 JavaScript 的三个重要版本，它们分别在 2015 年、2016 年和 2017 年发布...

    10 个月前
  • LESS 中的条件语句和循环语句详解

    LESS 是一种 CSS 预处理器，它可以让我们写出更加简洁、易于维护的 CSS 代码。除了基本的变量、混合器和嵌套规则等功能外，LESS 还支持条件语句和循环语句，可以帮助我们更加高效地编写前端代码...

    10 个月前

相关推荐

    暂无文章