[发明专利]一种选项卡切换方法、装置、计算设备及存储介质

权利要求书

1.一种选项卡切换方法，所述选项卡至少包括第一选项标签和第二选项标签，适于在计算设备中执行，所述方法包括：

在选项卡上添加CSS伪元素::after；

监听用户对选项卡的鼠标事件，当监听到用户对第一选项标签的鼠标事件时，获取第一选项标签的尺寸和位置，并将获取的第一选项标签的尺寸和位置保存到所述CSS伪元素::after内部；

基于CSS伪元素::after内部保存的第一选项标签的尺寸和位置，使用CSS伪类将所述第一选项标签显示为选中状态；

当监听到用户对第二选项标签的鼠标事件时，获取第二选项标签的尺寸和位置，并将获取的第二选项标签的尺寸和位置保存到所述CSS伪元素::after内部；

基于CSS伪元素::after内部保存的第二选项标签的尺寸和位置，使用CSS伪类将所述第二选项标签显示为选中状态。

2.如权利要求1所述的方法，其中，所述方法还包括：

在所述CSS伪元素内部设置transition过渡效果，以便在切换选项卡时平滑过渡。

3.如权利要求2所述的方法，其中，所述当监听到用户对第一选项标签的鼠标事件时，获取第一选项标签的尺寸和位置，并将获取的第一选项标签的尺寸和位置保存到所述CSS伪元素内部的步骤包括：

声明CSS自定义属性；

通过使用应用程序接口.setProperty将获取的第一选项标签的尺寸和位置赋值给所述CSS自定义属性；

使用var()的函数引用CSS自定义属性的值，以便将第一选项标签的尺寸和位置保存到CSS伪元素::after的内部。

4.如权利要求3所述的方法，其中，所述当监听到用户对第二选项标签的鼠标事件时，获取第二选项标签的尺寸和位置，并将获取的第二选项标签的尺寸和位置保存到所述第二选项标签对应的CSS伪元素内部的步骤包括：

通过使用应用程序接口.setProperty将获取的第二选项标签的尺寸和位置赋值给所述CSS自定义属性；

使用var()的函数引用CSS自定义属性的值，以便将第二选项标签的尺寸和位置保存到CSS伪元素::after的内部。

5.一种选项卡切换装置，其中，所述装置包括：

设置模块，适于在选项卡上添加CSS伪元素::after；

监听模块，适于监听用户对选项卡的鼠标事件；

第一获取模块，适于当监听到用户对第一选项标签的鼠标事件时，获取第一选项标签的尺寸和位置，并将获取的第一选项标签的尺寸和位置保存到所述CSS伪元素::after内部；

第一显示模块，适于基于CSS伪元素::after内部保存的第一选项标签的尺寸和位置，使用CSS伪类将所述第一选项标签显示为选中状态；

第二获取模块，适于当监听到用户对第二选项标签的鼠标事件时，获取第二选项标签的尺寸和位置，并将获取的第二选项标签的尺寸和位置保存到所述CSS伪元素::after内部；

第二显示模块，适于基于CSS伪元素::after内部保存的第二选项标签的尺寸和位置，使用CSS伪类将所述第二选项标签显示为选中状态。

6.如权利要求5所述的装置，其中，所述装置还包括：

过渡模块，适于在所述CSS伪元素::after内部设置transition过渡效果，以便在切换选项卡时平滑过渡。

7.一种计算设备，包括：

一个或多个处理器；

存储器；以及

一个或多个装置，所述一个或多个装置包括用于执行根据权利要求1至4所述的方法中的任一方法的指令。

8.一种存储一个或多个程序的计算机可读存储介质，所述一个或多个程序包括指令，所述指令当由计算设备执行时，使得所述计算设备执行根据权利要求1至4所述的方法中的任一方法。