Question

在过去的几天里，我正在努力解决一个奇怪的问题。我有href标签如下

<a id="opt" class="up" href="javascript:function(){e.preventDefault();}" onclick=" return shoptions(this.id);"></a>

我正在尝试在点击此标记时应用另一个css类，我正在尝试更改标记的背景图像。该类正在应用但图像未显示。任何人都可以知道这个问题吗？

我的javascript如下所示

 function shoptions(obj) {
        var a = $('#'+obj+'');
        if (a.hasClass('up')) {
            a.removeClass('up').addClass('down');
        }
        else {
            a.removeClass('down').addClass('up');
        }
        return false;
    }

我的css如下所示

a.up:link
{
background: #fff url(../egami/arrows_up.gif) scroll no-repeat left center !important;
padding: 2px 0 2px 16px !important;
}
a.down:link
{
background: #fff url(../egami/arrows_down.gif) scroll no-repeat left center !important;
padding: 2px 0 2px 16px !important;
}

Answer 1

您确定＆＃34;：链接＆＃34;是你想要使用的选择器？我的理解是这个选择器只适用于用户没有访问过的链接。你可能想尝试删除它，只是有了＃34; a.up＆＃34;和＆＃34; a.down＆＃34;。

Answer 2

由于您使用的是jQuery，因此可以使所有内容更具jQuery风格：

$('#opt').click(function(e) {
    e.preventDefault();
    $(this).toggleClass('down up');
});

摆脱HTML中的内联处理程序：

<a id="opt" class="up" href="#"></a>

演示：http://jsfiddle.net/3NYdF/

Answer 3

为什么同时使用onClick和href？仅使用href：

<a id="opt" class="up" href="javascript:function(){e.preventDefault();};return shoptions(this.id);" ></a>

或仅onClick：

<a id="opt" class="up" onClick="function(){e.preventDefault();};return shoptions(this.id);" ></a>

Answer 4

问题是你使用a.up:link＆amp; a.down:link 仅使用a.up＆amp; a.down

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

Reference

href标记图像不出现在addclass上

4 个答案:

演示：http://jsfiddle.net/3NYdF/