菜单图片切换的问题？

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

每个图标一个class

.home {
    background: url(f.png)
}

点击之后加上active类，去掉其他按钮的active类

.home.active {
    background-img: url(f.png)
}

Answer 3

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"/>