Question

我有以下链接

   <ul class="dropdown dropdown-horizontal">
        <li><a href="#" class="dir" onClick="clickMe('Wall'); selectedTab('Wall');">Wall</a></li>
        <li><a href="#" class="dir" onClick="clickMe('Introduction');">Introduction</a></li>
        <li><a href="#" class="dir" onClick="clickMe('Activities');">Activities</a></li>
        <li><a href="#" class="dir" onClick="clickMe('Reviews');">Reviews</a></li>
        <li><a href="#" class="dir" onClick="clickMe('Recommendation');">Recommendation</a></li>
        <li><a href="#" class="dir" onClick="clickMe('Photos');">Photos</a></li>
        <li><a href="#" class="dir" onClick="clickMe('Discussion');">Discussion</a></li>
    </ul>

如果我点击任何链接，那么它必须高亮。

Answer 1

我想你想要a:active CSS伪选择器。

Answer 2

您不需要javascript来执行此操作。一些CSS规则就足够了。

根据您需要的行为，您可以使用一个或所有HTML伪选择器（：链接，：已访问，：悬停，：有效）。

链接选择器指定链接的行为，当它没有被点击或因任何原因被激活时，换句话说就是在正常状态下。

：active 伪类将样式添加到已激活的元素。

如果您需要更具体，例如想要突出显示鼠标悬停（换言之，仅当链接位于鼠标下方时），请将其放在HTML的head部分：< / p>

<style type="text/css" media="screen">
    a:hover { background: #fbdbe8; color: #F55B99;}
</style>

如果您想突出显示已经访问过的内容与未将其放在HTML的head部分中的内容：

<style type="text/css" media="screen">
    a:visited { background: #fbdbe8; color: #F55B99;}
</style>

然后当您返回页面时，每个点击的链接都会突出显示。

当然，您可以在外部.css文件中添加我所说的样式规则，而不是将它们放在头部。

Answer 3

嗯：

<a href="#" id='photos'
onclick="var photos=document.getElementById('photos');photos.style.background='chartreuse';false;">
Photos</a>

Answer 4

最简单的方法是使用jquery

你会有类似的事情：

$('.menuItem').click(function() {
    $('.current').removeClass("curret"); // To remove the highlight from the previous selection
    $(this).addClass("current") 
});

然后在你的CSS中你会用你想要的样式声明当前。这对css伪选择器的一个优点是你可以做一些像$（this）.parent（）来访问链接的父元素，万一你的菜单是ul。

如何使用javascript激活链接

4 个答案: