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不正确。

尝试这样： 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");
    });
});

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元素，因此只需添加,即可将其应用于多个类/ ID。

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

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

现在，如果我们将所有内容添加到一起并包含对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'中，在这种情况下是一个伪类而不是一个常规的选择器类，它对一个被点击的链接进行样式化。它与您调用$('a').addClass("active")时获得的“a.active”不同，因此您不会看到当前css的任何效果。

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

a.active { text-decoration: underline; }

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

希望这有帮助。

为什么有两个活动链接？

3 个答案: