如何让链接在点击后看起来像是"active"

Question

我有一个菜单，我希望在人们被带到该页面后，指向该菜单的链接看起来像是"活跃的"。这是我的代码。非常感谢！

a.menu:link {text-decoration:none;color:#B2B2B2;}
a.menu:visited {text-decoration:none;color:#B2B2B2;}
a.menu:hover {color:#FFFFFF;border-bottom: .5px solid #FF944D;}
a.menu:active {text-decoration:none;color:#FF944D;}

<a id="box" class="menu"  href="boxes.php">Boxes</a><br/>
<a id="bag" class="menu" href="bags">Bags</a><br/>

因此，当用户转到 box.php 页面时，链接将显示其"活动"样式。但是当用户转到 Bags.php 页面时，"盒子"链接会恢复正常，"Bags"链接现在会显示其"活动"样式。提前非常感谢任何帮助！

Answer 1

（第二）最简单的方法是使用jQuery：

$( document ).ready( function() {
    $(".menu").click( function() {
        $(".clicked").removeClass("clicked");
        $( this ).addClass("clicked");
    });
});

现在我们需要为 js 重新制作 css：

.menu {
    text-decoration: none;
    color: B2B2B2;
}
.menu:hover {
    text-decoration: none;
    color: #FFFFFF;
    border-bottom: .5px solid #FF944D;
}
.clicked {
    text-decoration: none;
    color: #FF944D;
}

这应该有望摆脱您烦人的问题。

另一种超级简单的方法是将其添加到各自页面上的链接中：

style="text-decoration:none;color:#FF944D"

所以在你的页面上boxes.php你的html看起来像这样：

<a id="box" class="menu"  href="boxes.php" style="text-decoration:none;color:#FF944D">Boxes</a><br/>
<a id="bag" class="menu" href="bags">Bags</a><br/>

在bags(.php?)上它看起来像这样：

<a id="bag" class="menu" href="boxes.php">Boxes</a><br/>
<a id="box" class="menu"  href="bags" style="text-decoration:none;color:#FF944D">Bags</a><br/>