每个Tab正常状态显示一个图片，而选中状态显示另一个图片？

Question

题目描述

我可以实现每个标签页上显示不同的图片，但是如何更进一步，使每个Tab正常状态显示一个图片，而选中状态显示另一个图片？

题目来源及自己的思路

再做项目的时候碰到这个需求，没有思路啊

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<ul class="tabClick">

        <li class="active">
            <img src="img/icon/data.png" alt="">
        </li>
        <li>
            <img src="img/icon/kc.png" alt="">
        </li>
        <li>
            <img src="img/icon/ls.png" alt="">
        </li>
    </ul>
    
    js方面应该咋写？

你期待的结果是什么？实际看到的错误信息又是什么？

希望可以给出提示。。。

Answer 1

<li class="active">
    <img src="img/icon/data.png" class="icon_off" alt="">  未选中状态的图片
    <img src="img/icon/data_on.png" class="icon_on" alt="">   选中状态的图片
</li>

.icon_off {
   display: block;
}
.icon_on {
   display: none; 
}

.active .icon_off {
    display: none;
}

.active .icon_on {
    display: block;
}

这是我之前的处理方法，希望有帮助

Answer 2

事件触发时在img的url中替换图片；
1.双向绑定直接操作数据
2.原生js可以采用getAttribute获取url后赋值

Answer 3

每个tab标签有一个是否选中的状态，根据具不同的状态作为判断条件，渲染不同的图片就行了

Answer 4

选中的 tab 加个 active 类，在 css 里定义每个 tab 的 active 样式，把选中状态的图标设置在 active:after 里面