选项卡切换

时间:2024-03-19 06:59:47

下面我们来做一个简单的选项卡切换。
首先要实现的内容如下:
当鼠标移动到选项1按钮时,按钮有高亮效果,同时内容区显示第一张图片
选项卡切换
当鼠标移动到选项2按钮时,按钮1去除高亮效果赋予给按钮2,同时内容区显示第二张图片
选项卡切换
那么这种效果时如何实现的呢,
实现代码如下:
选项卡切换
很显然3个选项按钮都是由li来组成,按钮的高亮主要通过faker这个类来控制,哪个按钮有这个类,哪个按钮就会显示高亮,faker样式如下:
选项卡切换
同时,当按钮切换的时候,对应的内容也应该要得到切换,那么接下来我们就需要用到js来进行操作了。

选项卡切换
这样,一个简单的选项卡切换就完成啦。
注:部分内容有参考。