使用CSS更改所选链接的颜色？

Question

我已经为一组对象定义了一个类（item1）。

如果我点击/选择某个对象（来自该类），是否可以将它的文本颜色变为红色，并将其他所有对象（来自该类）的文本颜色变为黑色？

以下是应用该类（item1）的代码：

        <td>
            <a class="item1" href="/menu2" onclick="">
            Menu1
            </a>
        </td>

        <td>
            <a class="item1" href="/menu2" onclick="">
            Menu2
            </a>
        </td>

如何在css文件中实现这个功能？

- aF.

---

只有 CSS？没有 JavaScript 吗？ - Alexandre Wiechers Vaz

JavaScript可能也行:) - aF.

当我点击/选择对象（从类中），是否有可能将文本颜色设置为红色？不行。但使用JavaScript可以。 - ssilas777

我们在项目中使用这个，它会为您完成任务，除非您使用了像Bootstrap这样的第三方库，请查看此链接：https://dev59.com/Mm445IYBdhLWcg3wapzF - ssilas777

Answer 1

有没有可能在单击/选择对象（从类中）时将文本设置为红色？

好的，您使用的一些术语需要更清晰：

- 在CSS中，点击称为:active - 在CSS中，悬停称为:hover - 在CSS中，单击后称为:visited，当涉及到a标记时。

如果您的意思是实际设置链接为“活动”状态，则可以通过:visited选择器的“症状”来实现，但这绝不是这样做的方式。

真正的方法是在元素上添加一个类，该类将其标识为活动状态，例如并相应地设置该特定类的样式（通常使用javascript）

因此，使用javascript如何添加/删除该类？

使用javascript，您可以监听单击事件。每次单击某个元素时，执行以下操作：

- 从当前持有它的任何元素中删除现有的active类。 - 将其添加到被单击的项目中。

- Kristian

---

但是如果我点击其他，我想要恢复为黑色。这个可以实现吗？ - aF.

这里我只是想分享最近发现的一个东西：http://css-tricks.com/overriding-the-default-text-selection-color-with-css/，我知道它不是这个问题的答案，但标题让我想起了它=) - Martin Turjak

Answer 2

这里是代码演示链接！

以下是代码：

HTML

<td>
            <a class="item1" href="#">
            Menu1
            </a>
        </td>

        <td>
            <a class="item1" href="#">
            Menu2
            </a>
        </td>

JS

$('.item1').click(function(e){
    $('.item1').css("color", "black");
    $(this).css("color", "red");
});

- Alexandre Wiechers Vaz

Answer 3

你可能正在寻找:visited。

a:visited {

color:red;

}

- Wez

---

但是如果我点击其他，我想要恢复为黑色。这个能做到吗？ - aF.

@Wezly，你所建议的正是我所警告的。使用:visited作为活动状态指示器仅仅是点击后的一种症状，绝不是正确的做法。 - Kristian

那么你应该考虑使用JavaScript，@Kristian. 问题陈述仅为HTML和CSS，如果问题变更我很乐意提供JS示例。 - Wez

Answer 4

如果您正在使用ajax或在另一个框架中加载内容，则最好使用JavaScript（jQuery）：

$('a').each(function(){
   $(this).click(function(){
      $('a').removeClass('selected');
      $(this).addClass('selected');
   })
});

以您的风格：

a, a:hover, a:visited, a:active{
   color:black;
}
a.selected{
   color: red;
}

- korogui