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

说明书

本发明公开了一种选项卡切换方法、装置、计算设备及存储介质，在该方法中，在选项卡上添加CSS伪元素::after；监听用户对选项卡的鼠标事件，当监听到用户对第一选项标签的鼠标事件时，获取第一选项标签的尺寸和位置，并保存到::after内部；基于::after内部保存的第一选项标签的尺寸和位置，使用CSS伪类将第一选项标签显示为选中状态；当监听到用户对第二选项标签的鼠标事件时，获取第二选项标签的尺寸和位置，并保存到::after内部；基于::after内部保存的第二选项标签的尺寸和位置，使用CSS伪类将第二选项标签显示为选中状态。本方案基于CSS控制选项卡选中状态的移动，减少了对DOM的直接操作，代码耦合性更低，易于维护。

技术领域

本发明涉及计算机技术领域，特别涉及一种选项卡切换方法、装置、计算设备及存储介质。

背景技术

互联网提供的大量信息由于受到页面大小的限制，展示的内容也会受到限制，为了在页面中展示更多的内容，通常采用选项卡增加切换效果。这种切换效果是指在新闻资讯类网站中为了一个模块显示多个列表内容，通过切换不同的类别标题来显示或隐藏当前内容。为了标示当前已选中的选项而添加特殊标记，然后在切换标题选项的过程中，标记位会从当前标题位置移动到下一个标题位置。由于标题的文字宽度不一致，标记位在移动过程中需要动态计算当前标题的宽度，然后添加特殊标记。

目前选项卡切换效果大部分都是通过JavaScript动态计算后直接操作DOM来实现，首先使用JavaScript记录当前标记位的位置，然后在当前标记DOM上添加单独的class类名，来标示当前选中的某一项，等需要切换到下一项时再把当前的标记项删除，在下一项添加相应的class类名。该方案使用JavaScript直接操作DOM，这意味着开发者需要掌握各个浏览器的DOM接口特性，频繁进行DOM操作则会影响性能。且为了达到切换的平滑效果，还需要对标记项进行偏移计算，以便在下一个选项选中的时候当前标记位能够准确移动到下一项。这种方案会影响页面的反应速度，且不易维护。

为此，需要一种选项卡切换方法，在切换选项卡的过程中减少对DOM直接操作，减少代码量和计算量，从而提高页面的反应速度。

发明内容

为此，本发明提供一种选项卡切换方法，以力图解决或者至少缓解上面存在的问题。

根据本发明的一个方面，提供一种选项卡切换方法，选项卡至少包括第一选项标签和第二选项标签，适于在计算设备中执行，在该方法中，首先，在选项卡上添加CSS伪元素::after；然后，监听用户对选项卡的鼠标事件，当监听到用户对第一选项标签的鼠标事件时，获取第一选项标签的尺寸和位置，并将获取的第一选项标签的尺寸和位置保存到鼠标CSS伪元素::after内部；继而，基于CSS伪元素::after内部保存的第一选项标签的尺寸和位置，使用CSS伪类将鼠标第一选项标签显示为选中状态。当监听到用户对第二选项标签的鼠标事件时，获取第二选项标签的尺寸和位置，并将获取的第二选项标签的尺寸和位置保存到CSS伪元素::after内部；就可以基于CSS伪元素::after内部保存的第二选项标签的尺寸和位置，使用CSS伪类将鼠标第二选项标签显示为选中状态，完成了选项卡的切换。

可选地，在根据本发明的方法中，可以在CSS伪元素::after内部设置transition过渡效果，以便在切换选项卡时平滑过渡。

可选地，在根据本发明的方法中，可以先声明CSS自定义属性。然后，通过使用应用程序接口.setProperty将获取的第一选项标签的尺寸和位置赋值给CSS自定义属性。最后，使用var()的函数引用CSS自定义属性的值，以便将第一选项标签的尺寸和位置保存到CSS伪元素::after的内部。

可选地，在根据本发明的方法中，可以通过使用应用程序接口.setProperty将获取的第二选项标签的尺寸和位置赋值给鼠标CSS自定义属性。然后，使用var()的函数引用CSS自定义属性的值，以便将第二选项标签的尺寸和位置保存到CSS伪元素::after的内部。