为什么有两个活动链接？

I have an unordered list:

我有一个无序列表:

<ul>
    <a href="#frame-1"><li>Rogue</li></a>
    <a href="#frame-2"><li>Listen</li></a>
</ul>

and have styled it this way:

并以这种方式设计:

a {
color: grey;
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}

I've tried to set it so that the link is only underlined when it's hovered over (it does that) and when it's active. However, both links are underlined after they are clicked. Does that mean both are active? How do I get it to only underline the last link clicked (the active one)?

我试图设置它,以便链接只有在它悬停(它确实如此)和它处于活动状态时加下划线。但是,两个链接在单击后都加下划线。这是否意味着两者都活跃?如何才能使其仅显示最后一个单击的链接(活动链接)?

3 个解决方案

#1

Your HTML is not correct.

你的HTML不正确。

try like this: Demo

试试这样:演示

<ul>
   <li> <a href="#frame-1">Rogue</a></li>
   <li> <a href="#frame-2">Listen</a></li>
</ul>

JS:

$(function () {
    $("a").click(function (e) {
        e.preventDefault();
        $("a").addClass("active").not(this).removeClass("active");
    });
});

#2

In your css a:active 'active', in this case is a psuedo-class not a regular selector class, which styles a link which is being clicked on. It is not the same as 'a.active' which is what you get when you call $('a').addClass("active") so you will not see any effect from the css you currently have.

在你的css中:主动'主动',在这种情况下是伪类而不是常规选择器类,它对被点击的链接进行样式化。它与你在调用$('a')。addClass(“active”)时得到的'a.active'不同,所以你不会看到你目前拥有的css的任何效果。

So if what you are doing is trying to add / remove an 'active' selector class just change your css to:

因此,如果您正在尝试添加/删除“活动”选择器类,只需将您的css更改为:

a.active { text-decoration: underline; }

a.active {text-decoration:underline; }

also you should reformat your html as LukeXF suggested.

你也应该像LukeXF建议的那样重新格式化你的html。

Hope this helps.

希望这可以帮助。

#3

first of all the HTML structure is in correct. You should include a element inside the li element. Which will produce this:

首先,HTML结构是正确的。您应该在li元素中包含一个元素。哪个会产生这个:

Your HTML:

<ul>
   <li> <a href="#frame-1">Rogue</a></li>
   <li> <a href="#frame-2">Listen</a></li>
</ul>

Your CSS does not need to be changed, apart from:

您的CSS不需要更改,除了:

a:active, {
    text-decoration: underline;
}

Needs to also include the new .active element we will be using so just add a , to apply it to multi classes/ids.

需要还包括我们将使用的新.active元素,所以只需添加一个,将其应用于多类/ ID。

a:active,.active {
    text-decoration: underline;
}

Your JavaScript Now to make the magic work you should use some JavaScript for this I will be using jQuery, a JavaScript library.

现在,你的JavaScript,使魔术工作,你应该使用一些JavaScript为了这个,我会使用jQuery JavaScript库。

$(function () {
    // This detects if click any HTML element inside <a></a>
    $("a").click(function (e) {
        e.preventDefault();
        // This will apply the a:active if it is clicked, else if not active remove class.
        $("a").addClass("active").not(this).removeClass("active");
    });
});

Now if we add all that together and include the reference to the jQuery library you will have the following code, you choose how to septate it through your file layout:

现在,如果我们将所有这些添加到一起并包含对jQuery库的引用,您将拥有以下代码,您可以选择如何通过文件布局隔离它:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script>
$(function () {
    // This detects if click any HTML element inside <a></a>
    $("a").click(function (e) {
        e.preventDefault();
        // This will apply the a:active if it is clicked, else if not active remove class.
        $("a").addClass("active").not(this).removeClass("active");
    });
});
</script>

<style>
a {
color: grey;
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active,.active {
text-decoration: underline;
}
</style>

<ul>
   <li><a href="#frame-1">Rogue</a></li>
   <li><a href="#frame-2">Listen</a></li>
</ul>

This will effectively achieve what you are trying to do, let me know if you have any issues.

这将有效地实现您的目标,如果您有任何问题,请告诉我。

#1