在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML5  HTML/ 菜單圖片切換的問(wèn)題？

菜單圖片切換的問(wèn)題？

圖片描述

有這樣一個(gè)需求，如圖分別是四個(gè)菜單按鈕，這里的四個(gè)菜單圖標(biāo)不是類似Font Awesome的矢量圖標(biāo)，而是png格式的圖片，分別是f.png、u.png、s.png、p.png。

需求：點(diǎn)擊相應(yīng)的圖片，將會(huì)顯示其對(duì)應(yīng)的f_a.png的透明圖片，在點(diǎn)擊其他圖片時(shí)（被點(diǎn)擊的圖片鏈接變換為 某_a.png 以此類推）同時(shí)原圖片將還原成f.png。那么這里使用js如何實(shí)現(xiàn)呢？（不考慮矢量圖標(biāo)）

回答
編輯回答
扯機(jī)薄

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"/>
2017年5月4日 21:08
編輯回答
老梗

每個(gè)圖標(biāo)一個(gè)class

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

點(diǎn)擊之后加上active類，去掉其他按鈕的active類

.home.active {
    background-img: url(f.png)
}
2017年8月2日 07:14
編輯回答
入她眼
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是外層函數(shù)傳遞的索引值

2018年7月1日 02:33