需求:当鼠标悬停在tab栏某处上时 字体样式改变 且相应图片出现

分析结构

很明显 这些tab栏内容都在a里 我们需要给这里每个a注册事件 而这里a的父元素都是ul 可以想到用事件委托 把事件委托给ul

实现步骤

先获取ul对象

const ul=document.querySelector(‘.tab-nav ul’)

然后给其添加鼠标经过事件 用e.target获取点击对象 若为<a> 移除已经有active属性对象的属性 并给目标对象加上active属性

到这里就完成了文字样式的转换效果 接下来完成图片切换

这部分的active属性表示图片是否显示 还是要给已有属性的去除掉 再给鼠标经过的加上即可

但这里就需要思考:如何获取事件对象元素对应的图片呢?

为了解决这个问题 我们给<a>标签内部都加上了自定义属性data-id 用id来获取对应的图片

e.target也就是a

用e.target.dataset.id就可以获取到我们的自定义属性id(字符串形式)

具体步骤如下

到此为止 我们的案例就基本完成啦~~~