为什么有两个活动的链接？

Question

我有一个无序列表：

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

它的样式是这样的：

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

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}

我试着设置它，使链接只在它悬停时(它会这样做)和当它激活时才加下划线。但是，这两个链接在单击后都带有下划线。这是否意味着两者都处于活动状态？如何让它只对最后点击的链接(活动链接)加下划线？

Answer 1

您的HTML不正确。

像这样尝试：

<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");
    });
});

Answer 2

首先，HTML结构是正确的。您应该在li元素中包含一个元素。这将产生以下结果：

你的HTML:

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

您的CSS不需要更改，除了：

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

还需要包含我们将使用的新.active元素，因此只需添加一个,以将其应用于多个类/ids。

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

Your JavaScript Now为了让你变得神奇，你应该使用一些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");
    });
});

现在，如果我们将所有这些加在一起，并包括对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>

这将有效地实现您正在尝试做的事情，如果您有任何问题，请让我知道。

Answer 3

在你的css a:active 'active‘中，这里是一个psuedo- class，而不是一个常规的选择器类，它设置了一个正在点击的链接的样式。它与'a.active‘不同，’css‘是你调用$('a').addClass("active")时得到的，所以你不会从你当前拥有的css中看到任何效果。

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

a.active { text-decoration: underline; }

此外，您应该按照LukeXF的建议重新格式化您的html。

希望这能有所帮助。