菜单图片切换的问题？

Question

有这样一个需求，如图分别是四个菜单按钮，这里的四个菜单图标不是类似Font Awesome的矢量图标，而是png格式的图片，分别是f.png、u.png、s.png、p.png。

需求：点击相应的图片，将会显示其对应的f_a.png的透明图片，在点击其他图片时（被点击的图片链接变换为 某_a.png 以此类推）同时原图片将还原成f.png。那么这里使用js如何实现呢？（不考虑矢量图标）

Answer 1

function setStyle(e, a) {    var i;    for (i in a) {        e.style[i] = a[i]    }}function changeIcon(index) {    var home = document.getElementsByClassName('iconhome_act')[0],        server = document.getElementsByClassName('iconservice')[0],        user = document.getElementsByClassName('iconuser')[0];    switch (index) {    case 0:        setStyle(home, {            backgroundImage : "url('index/myImg/t_icon_home_active.png')"        })        setStyle(user, {            backgroundImage : "url('index/myImg/t_icon_user.png')"        });        setStyle(server, {            backgroundImage : "url('index/myImg/t_icon_service.png')"        });        break;    case 1:        setStyle(home, {            backgroundImage : "url('index/myImg/t_icon_home.png')"        })        setStyle(user, {            backgroundImage : "url('index/myImg/t_icon_user.png')"        });        setStyle(server, {            backgroundImage : "url('index/myImg/t_icon_service_active.png')"        });        break;    case 2:        setStyle(home, {            backgroundImage : "url('index/myImg/t_icon_home.png')"        })        setStyle(user, {            backgroundImage : "url('index/myImg/t_icon_user_active.png')"        });        setStyle(server, {            backgroundImage : "url('index/myImg/t_icon_service.png')"        });        break;    }}我这里的index是外层函数传递的索引值

Answer 2

js{&nbsp; &nbsp; data() {&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; currentIndex: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items: ['f.png', 'u.png', 's.png', 'p.png']&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; methods: {&nbsp; &nbsp; &nbsp; &nbsp; getSrc(i) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var src = this.items[i]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (i === this.currentIndex) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src = src.replace(/(?=.\.png)/, '_')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return src&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}template<img v-for="(item,i) of items" :src="getSrc(i)" @click="currentIndex=i"/>