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

前端是网页或者app的前台部分，通俗地说是用户浏览网站或者使用app的时候，看到的页面或者界面，是直接呈现给用户的。因此前端对用户体验至关重要。

淘宝网首页选项卡切换功能

那么在有限的页面空间里，前端如何保持良好的用户体验，又尽量多地展现内容以满足业务需求呢？上图是某宝官网首页的局部，通过观察可以看出通过选项卡切换，在同一个区域实现了三个不同内容的切换展示。选项卡切换是怎么实现的呢？

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

现在我们来搭建简易版本的选项卡页面结构，以小见大，拆解选项卡切换的功能实现。

简易版的选项卡页面结构

选项卡切换功能，就是当我们选中某个菜单的时候，页面只显示对应菜单的内容。这个功能可以拆解成以下六个步骤：

第一步：1.获取需要操作的所有元素；

第二步：2.声明一个变量保存前一个选中的选项卡菜单的索引值；

第三步：3.给每个选项卡菜单添加鼠标点击事件；

第四步：4.清除前一个选中的选项卡菜单和内容的样式；

第五步：5.设置当前选项卡菜单和内容的样式；

第六步：6.保存当前选项卡菜单的索引值。

//1.获取需要操作的所有元素//1.1获取所有的选项卡菜单let oItems = document.querySelectorAll(".tab-item");//1.1获取所有的选项卡内容let oContents = document.querySelectorAll(".tab-content");//2.声明一个变量保存前一个选中的选项卡菜单的索引值let previousIndex = 0;//3.给每个选项卡菜单添加鼠标点击事件for (let i = 0; i < oItems.length; i++) {  //3.1获取当前的选项卡菜单和内容  let currentItem = oItems[i];  let currentContent = oContents[i];  //3.2给当前的选项卡菜单添加鼠标点击事件  currentItem.onclick = function () {    //4.清除前一个选中的选项卡的样式    //4.1获取前一个选中的选项卡菜单和内容    let preItem = oItems[previousIndex];     let preContent = oContents[previousIndex];    //4.2删除前一个选中的选项卡菜单和内容的样式    preItem.className = preItem.className.replace("selected", "");    preContent.className = preContent.className.replace("current", "");    //5.设置当前选项卡的样式    this.className = this.className + " selected";    currentContent.className = currentContent.className + " current";     //6.保存当前选项卡菜单的索引值    previousIndex = i;  }}

选项卡切换功能实现如下图：

简易版的选项卡切换功能

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

第一步：1.定义一个类，通过这个类可以创建选项卡；

第二步：2.获取选项卡菜单和内容；

第三步：3.声明变量保存前一个选中选项卡菜单的索引值；

第四步：4.添加点击事件或者其他事件；

第五步：5.删除前一个选中的选项卡菜单和内容的样式；

第六步：6.设置当前选项卡菜单和内容的样式，添加类名，注意类名前面要留空格；

第七步：7.保存当前选项卡菜单的索引值；

第八步：8.通过定义的类创建选项卡，需要传入选项卡菜单和内容的类名；

第九步：9.运行创建好的选项卡的点击事件。

应用面向对象的思想重写的选项卡切换代码

以上实现了选项卡鼠标点击切换的功能，如果需要其他的切换方式，比如：鼠标移入选项卡切换，只需要添加如下代码即可：

鼠标移入选项卡切换功能

由于点击切换和移入切换实现样式改变的代码是一样的，所以可以进一步优化，把设置样式的代码抽出来作为一个私有方法，这样点击切换和移入切换选项卡，内部设置样式的时候调用同一个方法即可，优化页面性能，提高用户体验。

// 应用面向对象的思想重写的选项卡切换代码//1.定义一个类，通过这个类可以创建选项卡class Tab {  //注意：形式参数oItemsSelector和oContentsSelector，用来传入选项卡菜单和内容的类名  constructor(oItemsSelector, oContentsSelector) {    //2.获取选项卡菜单和内容    this.oItems = document.querySelectorAll(oItemsSelector);    this.oContents = document.querySelectorAll(oContentsSelector);    //3.声明变量保存前一个选中选项卡菜单的索引值    this.previousIndex = 0;  }  //4.添加事件  //4.1添加点击事件  addClickEvent() {    for (let i = 0; i < this.oItems.length; i++) {      //4.1.1获取当前的选项卡菜单和内容      let item = this.oItems[i];      //4.1.2给当前的选项卡添加鼠标点击事件      item.onclick = () => {        //4.2.3调用设置样式的方法        this._change(i);      }    }  }  //4.2添加鼠标移入事件  addEnterEvent() {    for (let i = 0; i < this.oItems.length; i++) {      //4.2.1获取选项卡菜单      let item = this.oItems[i];      //4.2.2给选项卡添加鼠标移入事件      item.onmouseenter = () => {        //4.2.3调用设置样式的方法        this._change(i);      }    }  }  //注意：优化代码，设置样式的代码是一样的，可以抽出  _change(i) {    //5.获取当前的选项卡菜单和内容    let currentItem = this.oItems[i];    let currentContent = this.oContents[i];    //6.删除前一个选中的选项卡菜单和内容的样式    //6.1获取前一个选项卡的菜单和内容    let preItem = this.oItems[this.previousIndex];    let preContent = this.oContents[this.previousIndex];    //6.2清除前一个选项卡菜单和内容的样式，删除类名    preItem.className = preItem.className.replace("selected", "");    preContent.className = preContent.className.replace("current", "");    //7.设置当前选项卡菜单和内容的样式，添加类名，注意类名前面要留空格    currentItem.className = currentItem.className + " selected";    currentContent.className += " current";    //8.保存当前选项卡菜单的索引值    this.previousIndex = i;  }}//9.通过定义的类创建选项卡，需要传入选项卡菜单和内容的类名let tab = new Tab(".tab-item", ".tab-content");//9.1运行创建好的选项卡的鼠标点击事件，实现鼠标点击切换选项卡tab.addClickEvent();//9.2运行创建好的选项卡的鼠标移入事件，实现鼠标移入切换选项卡tab.addEnterEvent();