Cordova - 更改标签条图标答案

【问题标题】：Cordova - Changing tabstrip IconsCordova - 更改标签条图标
【发布时间】：2016-05-10 22:25:36
【问题描述】：

在我的 Cordova 应用程序中，我有一个带有 2 个主页和设置按钮的选项卡。我首先使用 data-icon 属性在这些按钮中显示图标，但由于 Windows Phone 不支持字体图标，我尝试使用 png 文件。我在每个 tabstrip 按钮中添加了 img 标签，并在每次选择按钮时将图标更改为活动/非活动颜色。

这是我的代码：

<div data-role="tabstrip" id="tabsptrip" data-select="onSelect">                    
                <a href="views/home.html" id="homeTabstrip"><img id="homeIcon" src="Images/Icons/home_active.png" height="35" width="35" />Start</a>
                <a href="views/Settings.html" id="settingsTabstrip"><img id="settingsIcon" src="Images/Icons/gearwheel_inactive.png" height="35" width="35" />Einstellungen</a>
            </div>


function onSelect(e) {
            debugger;
            console.log(e.item[0].id);

            if (e.item[0].id == "homeTabstrip") {
                $('#homeIcon').attr("src", "Images/Icons/home_active.png");
                $('#settingsIcon').attr("src", "Images/Icons/gearwheel_inactive.png");
            } else {
                $('#homeIcon').attr("src", "Images/Icons/home_inactive.png");
                $('#settingsIcon').attr("src", "Images/Icons/gearwheel_active.png");
            }
        }

现在，当我第一次加载应用程序时，会显示 html 中指定的正确图标。当我进入设置页面时，图标被正确交换，并显示 gearwheel_active.png 和 home_inactive.png 图标。但是当我回到主页时，图标并没有改变。 src正确更新，显示的图标仍然是gearwheel_active.png和home_inactive.png，而不是gearwheel_inactive.png和home_active.png。

图像文件存在（因为它们在应用程序首次启动时正确显示）并且没有引发错误。

【问题讨论】：

标签： cordova windows-phone-8.1 icons

【解决方案1】：

我通过更改 css 而不是通过 jquery 更改图像源解决了这个问题。

这是我的代码：

<div data-role="tabstrip" id="tabstrip" data-select="onSelect">                    
                    <a href="views/home.html" id="homeTabstrip">Start</a>
                    <a href="views/Settings.html" id="settingsTabstrip">Einstellungen</a>
                </div>

和css：

#tabstrip .km-icon {
    background-repeat:no-repeat;
    -webkit-background-clip: border-box;
    background-size: 100% 100%;
}

#homeTabstrip.km-state-active span.km-icon {
    background-image: url("../../Images/Icons/home_active.png");
}

#homeTabstrip .km-icon {
    background-image: url("../../Images/Icons/home_inactive.png");

}

#settingsTabstrip.km-state-active span.km-icon {
    background-image: url("../../Images/Icons/gearwheel_active.png");
}

#settingsTabstrip .km-icon {
    background-image: url("../../Images/Icons/gearwheel_inactive.png");

}

【讨论】：