菜单图片切换的问题?

图片描述

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

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

阅读 2.4k
3 个回答
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是外层函数传递的索引值

每个图标一个class

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

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

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

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"/>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题