Question

在我的Cordova App中，我有一个带有2个按钮的标签，用于家庭和设置。我首先使用data-icon属性在这些按钮中显示图标，但由于Windows Phone不支持字体图标，我尝试使用png文件。我在每个tabtrip按钮中添加了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。

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

Answer 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");

}

Cordova - 更改标签图标

1 个答案: