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

问题描述：

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

在这里，我想箭头图像来主动联系下，使其表明它是活跃.. 我已经尝试了上面的代码，但我没有得到所需的输出..

什么不工作？ – 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'); 
});

我试过因为你指定..但它说，内容不是一个有效的CSS属性.. – Xavier

@ Xavier你使用XHTML，不是吗？那么，检查我的编辑，它现在应该是有效的。 – Giona

雅在Chrome中工作正常，但在IE 8中不工作有没有什么办法可以在IE中实现这一点也 – Xavier

答

您可能必须使用一些脚本来做到这一点。为活动状态创建一个单独的类并单击添加该类。

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

这里是演示http://jsfiddle.net/qvQxp/1/

答

我尝试了Giona的回答，发现浏览器忽略了剩余空白的负值，并且箭头仍然偏离了箭头图像宽度的一半。要解决这个问题，请将负边距应用于边距右边。

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

相关推荐