a：active a href不工作 [英] a:active a href not working

问题描述

我试图应用css上的href，基本上，我需要应用相同的样式悬停时，一个href已被点击，以表示他们在哪个页面上的用户。任何想法？

I'm trying to apply the css on the a href, basically i need to apply the same style as hover when the a href has been clicked to indidate the users on which page that they are on. any ideas?

推荐答案

：active 伪类意味着< a href =http://www.w3.org/TR/css3-selectors/#the-user-action-pseudo-classes-hover-act =nofollow noreferrer>用户正在激活元素。这是在点击链接时触发的，但不会告诉您用户当前正在使用的网页。

The :active pseudo-class means that an element is being activated by the user. This is triggered when the link is clicked, but it doesn't tell you what page the user is currently on.

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

You could manually go through each page on your website, and in your navigation, add a class to the current page. For example, on the "About Us" page, the navigation mightlook like this:

<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 类从关于我们链接，并将其添加到联系人链接。这个解决方案的问题是，它需要大量的手动编辑你的代码，如果你管理一个大型网站，这可能很痛苦。

On the contact page, you would then remove the current-page class from the "About Us" link and add it to the "Contact" link. The problem with this solution is that it requires a lot of manual edits to your code, which can be painful if you're managing a large site.

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

A better solution might use Javascript to parse the current page from the URL and automatically add the right class to the corresponding link. The jQuery code could look something like this (assuming the same html as above):

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

这篇关于a：active a href不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！