如何通過該活動鏈接下的箭頭標記突出顯示頁面中的選定鏈接？

我的HTML代碼是：如何通過該活動鏈接下的箭頭標記突出顯示頁面中的選定鏈接？

<div id="arrow"> 
    <b>Filter By: </b> 

    <a href="__#" onclick="GetAllTasks();" id="id_all" style="color: #88b807;">All</a> 

    <input type="text" size="3" style="display: none;" id="DateFilter" /> 

    <a href="__#" onclick="GetByDate(this);" style="vertical-align: middle;" id="cal_icon">EndDate</a> 

    <a href="#"__0 onclick="GetMyTasks();" id="id_myposts">My Requests</a> 
    </div>

我的CSS代碼是：

a:active {font-family: Verdana, Sans-serif; 
      color:#FF0000; 
      text-decoration:none; 

      background: url("Images/arrow_down.png") no-repeat; 
      background-position:center; 
      }

在這裏，我想箭頭圖像來主動聯繫下，使其表明它是活躍.. 我已經嘗試了上面的代碼，但我沒有得到所需的輸出..

來源

2012-10-04 Xavier

什麼不工作？ – billyonecan

我已經接受了答案，它給了我我想要的東西..但是很少不是我所期望的。所以dat的原因是 - 40％.. 除此之外，你可以告訴我如何使用jquery或任何示例關於相同的代碼。 – Xavier

@deifwud 那個箭頭圖像不在活動鏈接下面 – Xavier

可以顯示純CSS（見下文）的箭頭，但你需要JavaScript來保持類「活着」。

Demo（點擊鏈接）

HTML：

<b>Filter By: </b> 
<a href="#">All</a> 
<a href="#">EndDate</a> 
<a href="#">My Requests</a>

CSS：

a { 
    position:relative; 
} 
a:active:after, a.active:after { 
    background: url("Images/arrow_down.png"); 
    width:10px; /* arrow's width */ 
    height:10px; /* arrow's height */ 
    margin-left:-5px; /* half of arrow's width */ 
    position:absolute; 
    top:100%; 
    right:50%; 
    content:" "; 
}

的jQuery：

$('a').on('click',function(){ 
    $('a').removeClass('active'); 
    $(this).addClass('active'); 
});

來源

2012-10-04 10:10:35 Giona

我試過因爲你指定..但它說，內容不是一個有效的CSS屬性.. – Xavier

@ Xavier你使用XHTML，不是嗎？那麼，檢查我的編輯，它現在應該是有效的。 – Giona

雅在Chrome中工作正常，但在IE 8中不工作有沒有什麼辦法可以在IE中實現這一點也 – Xavier

您可能必須使用一些腳本來做到這一點。爲活動狀態創建一個單獨的類並單擊添加該類。

$('a').click(function(){ 
    $(this).addClass("active"); 
});

這裏是演示http://jsfiddle.net/qvQxp/1/

來源

2012-10-04 10:05:30 Sowmya

我嘗試了Giona的回答，發現瀏覽器忽略了剩餘空白的負值，並且箭頭仍然偏離了箭頭圖像寬度的一半。要解決這個問題，請將負邊距應用於邊距右邊。

來源

2015-03-18 01:49:36 Matt

如何通過該活動鏈接下的箭頭標記突出顯示頁面中的選定鏈接？

回答

相關問題