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/>

因此，当用户访问boxes.php页面时，该链接将显示其“活动”样式。但是当用户进入bags.php页面时，“Boxes”链接将返回正常状态，“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/>

如何在链接点击后保持链接看起来像“活动”

1 个答案: