有这样一个需求，如图分别是四个菜单按钮，这里的四个菜单图标不是类似Font Awesome的矢量图标，而是png格式的图片，分别是f.png、u.png、s.png、p.png。需求：点击相应的图片，将会显示其对应的f_a.png的透明图片，在点击其他图片时（被点击的图片链接变换为 某_a.png 以此类推）同时原图片将还原成f.png。那么这里使用js如何实现呢？（不考虑矢量图标）
3 回答
慕哥6287543
TA贡献1831条经验 获得超10个赞
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是外层函数传递的索引值
婷婷同学_
TA贡献1844条经验 获得超8个赞
js
{
data() {
{
currentIndex: 0,
items: ['f.png', 'u.png', 's.png', 'p.png']
}
},
methods: {
getSrc(i) {
var src = this.items[i]
if (i === this.currentIndex) {
src = src.replace(/(?=.\.png)/, '_')
}
return src
}
}
}
template
<img v-for="(item,i) of items" :src="getSrc(i)" @click="currentIndex=i"/>
添加回答
举报
0/150
提交
取消