Question

我正在尝试在href上应用css，基本上我需要应用与hover相同的样式，当单击一个href以指示用户所在的页面时。任何想法？

Answer 1

:active表示“点击（或以其他方式激活）”。它并不意味着“链接到当前页面”。 CSS最接近的是:target（对于文档中的特定点，而不是整个文档）。

您需要修改标记，以便为其编写选择器。使用某种服务器端技术添加类或id是常用的方法。

Answer 2

:active伪类意味着an element is being activated by the user。单击链接时会触发此操作，但它不会告诉您用户当前所在的页面。

繁琐的手动解决方案

您可以手动浏览网站上的每个页面，并在导航中将类添加到当前页面。例如，在“关于我们”页面上，导航可能如下所示：

<ul id="navigation">
    <li><a href="/index.html">Home</a></li>
    <li><a href="/about.html" class="current-page">About Us</a></li>
    <li><a href="/contact.html">Contact</a></li>
</ul>

在联系页面上，您将从“关于我们”链接中删除current-page课程，并将其添加到“联系人”链接。此解决方案的问题在于它需要对您的代码进行大量手动编辑，如果您管理大型网站，这可能会很痛苦。

自动客户端解决方案

更好的解决方案可能是使用Javascript从URL解析当前页面并自动将正确的类添加到相应的链接。 jQuery代码可能看起来像这样（假设与上面相同的html）：

<script type="text/javascript">
$(document).ready(function() {
    var urlParts = window.location.pathname.split("/"),
        // get the last section of the url
        currentPage = urlParts[urlParts.length - 1];

    $("#navigation a[href*=" + currentPage + "]").addClass("current-page");
});
</script>

Answer 3

要执行此操作，您必须将一个类（例如：活动，选定等）添加到要设置样式的锚点。 a：当您点击链接时，仅激活“触发器”，它不会“记住”您所在的页面。

Answer 4

a:active仅在您点击该链接并在新窗口/标签中打开页面时才有效，这意味着不应更改当前页面，否则a:active将无效....

a：激活一个href不工作

4 个答案:

繁琐的手动解决方案

自动客户端解决方案