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

Question

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

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

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

Answer 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本身添加active类

$(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>