前端设计和开发，提高用户体验，切换选项卡的功能原生实现与优化

最后更新：2020-05-05 11:07:14 手机定位技术交流文章

qttmf_VCG41616903228 前端是网页或应用程序的前端部分。通常，当用户浏览网站或使用应用程序时，他们看到的页面或界面会直接呈现给用户。因此，前端对用户体验至关重要。

淘宝首页标签切换功能

前端如何保持良好的用户体验，同时在有限的页面中呈现尽可能多的内容以满足业务需求空？上面的图片是一个财富官方网站主页的一部分。通过观察，我们可以看到通过切换标签，三个不同的内容被切换并显示在同一个区域。标签交换是如何实现的？

建立基本页面结构的HTML和CSS代码

现在让我们建立一个简单版本的标签页结构，具有“小看大，拆标签开关”的功能。

选项卡页面结构的简单版本

选项卡切换功能，即当我们选择一个菜单时，页面只显示相应菜单的内容。该功能可分解为以下六个步骤:

步骤1: 1。获取所有需要操作的元素；

步骤2: 2。声明一个变量以保存以前选择的选项卡菜单的索引值；

步骤3: 3。将鼠标单击事件添加到每个选项卡菜单中；

步骤4: 4。清除上一个选定选项卡的菜单和内容样式；

步骤5: 5。设置当前选项卡菜单和内容样式；

步骤6: 6。保存当前选项卡菜单的索引值。

选项卡切换功能的JS代码

选项卡切换功能如下图所示:

选项卡切换功能的简单版本

虽然上述代码实现了标签切换功能，但它有局限性。因为只实现了鼠标点击切换，不能满足业务需求。要实现其他切换方式，必须重写代码，这不利于维护。面向对象编程是一种软件开发方法，可以扩展到前端开发的交互界面。应用面向对象的思想，它可以分解成九个步骤:

步骤1: 1。定义一个可以创建选项卡的类；

步骤2: 2。获取选项卡菜单和内容；

步骤3: 3。声明变量以保存先前选定选项卡菜单的索引值；

步骤4: 4。添加点击事件或其他事件；

步骤5: 5。删除以前选择的选项卡菜单和内容样式；

步骤6: 6。设置菜单的样式和当前标签的内容，添加类名，并注意在类名前留空网格；

步骤7: 7。保存当前选项卡菜单的索引值；

步骤8: 8。要通过定义的类创建一个选项卡，您需要传入选项卡菜单和内容的类名；

步骤9: 9。为创建的选项卡运行单击事件。

应用面向对象思想重写标签交换生成

以上实现了制表符鼠标点击切换的功能。如果需要其他切换方法，如鼠标移动到制表符切换，只需要添加以下代码:

将鼠标移动到制表符切换功能

由于通过点击切换和移动切换来实现样式改变的代码是相同的，所以可以通过将设置样式的代码作为私有方法来进一步优化，这样，在内部设置样式时，点击切换和移动切换选项卡可以调用相同的方法，从而优化页面性能，提高用户体验。

应用面向对象的思想重写制表符转换代码。