单击另一个链接时如何从链接中删除颜色答案

【问题标题】：How to remove color from link when clicking another单击另一个链接时如何从链接中删除颜色
【发布时间】：2015-11-02 19:07:00
【问题描述】：

所以我的意图是在单击与该链接相关的特定链接内容时创建一个简单的菜单栏，如下所示。选择后，链接会变成蓝色。我已经创建了这个

<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>
<a href="#" class="link">Link 3</a>

a, a:visited { color:black }
a.link.active { color:blue; }

$(function() {
   $('a.link').click(function() {
       $('a.link').removeClass('active');
       $(this).addClass('active');
   });
});

小提琴： https://jsfiddle.net/gHb9F/ 它可以工作，但我希望“link2”在打开窗口时已经具有这种蓝色，并在单击另一个链接时将其更改为初始黑色。

【问题讨论】：

那么把link2的类改成link active？由于活动链接依赖于呈现的实际页面，因此在服务器端进行操作是有意义的。
对于带有文本链接 2 的锚点，您可以将您的课程从 class="link" 更新为 class="link active"
你的a.link.active有语法错误，应该是a.link:active。
当我将 jQuery 版本更改为 1.11 时，您的示例适用于我。你有什么理由需要使用 1.5 吗？

标签： javascript jquery html css hyperlink

【解决方案1】：

您可以动态触发第二个链接的点击事件，

$(function() {
  $('a.link').click(function() {
    $('a.link').removeClass('active');
    $(this).addClass('active');
  }).eq(1).click();
});

a,
a:visited {
  color: black
}
a.link.active {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>
<a href="#" class="link">Link 3</a>

或者将该类添加到第二个链接

$(function() {
  $('a.link').click(function() {
    $('a.link').removeClass('active');
    $(this).addClass('active');
  }).eq(1).addClass('active');
});

a,
a:visited {
  color: black
}
a.link.active {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>
<a href="#" class="link">Link 3</a>

或者在 html 本身中添加活动类

$(function() {
  $('a.link').click(function() {
    $('a.link').removeClass('active');
    $(this).addClass('active');
  });
});

a,
a:visited {
  color: black
}
a.link.active {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="link">Link 1</a>
<a href="#" class="link active">Link 2</a>
<a href="#" class="link">Link 3</a>

【讨论】：

@ThomasGijsels：很高兴帮助