href標記圖片未出現在addclass上

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

您確定“：link”是您要使用的選擇器嗎？ 我的理解是，該選擇器僅適用於用戶尚未訪問的鏈接。 您可能想嘗試刪除它，而僅使用“ a.up”和“ a.down”。

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和a.down:link僅使用a.up和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

參考