Question

我正在构建一个单页微网站，所有内容都在一个页面上。我使用锚标签跳转到网站的特定部分。我想要实现的是一个跨浏览器的解决方案，它将使我的链接颜色相同：悬停并保持直到另一个链接被点击，然后作为回报将使之前点击的链接恢复正常状态。

请帮忙！感谢

Answer 1

的解决方案

HTML

<a href="#" class="selected">Test 1<a>
<a href="#" class="">Test 2<a>

CSS

a.selected {
    color: pink;
}

JavaScript（使用jQuery）

$("a").on("click", function () {
    if ($(this).hasClass("selected")) { return; }

    $("a").removeClass("selected");        
    $(this).addClass("selected");
});

在此示例中，我使用页面上的所有锚标记。使用类更具体地选择它们可能更好。

在运行上面的代码之前添加以下html行，但在页面中尽可能放低。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

单页网站链接颜色切换Javascript

1 个答案: