如何使用JavaScript激活链接

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伪选择器（ ：link ， ：visited ， ：hover和：active ）。

链接选择器指定当链接由于某种原因（即处于正常状态）未被单击或激活时的行为。

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

如果您需要更具体，例如要突出显示鼠标悬停的内容 （换句话说，仅当链接位于鼠标下方时），然后将其放在HTML的头部：

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

如果要突出显示您已经访问过的内容与不将其放在HTML开头的内容：

<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伪选择器相比，此方法的一个优点是，如果菜单为ul，则可以执行$（this）.parent（）之类的操作来访问链接的父元素。