Question

我的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;
            }

在这里，我希望箭头图像位于活动链接下，以便它指示它处于活动状态。我已经尝试了上面的代码，但我没有得到所需的输出..

Answer 1

你可以用纯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');
});

Answer 2

您可能必须使用某些脚本来执行此操作。为活动状态创建一个单独的类，并在单击时添加该类。

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

以下是演示http://jsfiddle.net/qvQxp/1/

Answer 3

我尝试了Giona的答案，发现浏览器忽略了左边缘的负片，箭头仍偏离箭头图像宽度的一半。要解决此问题，请将负边距应用于margin-right。

如何通过该活动链接下的箭头标记突出显示页面中的选定链接？

3 个答案: