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

小提琴： https://jsfiddle.net/gHb9F/ 它有效，但我想＆＃34; link2＆＃34;打开窗口时已经有这种蓝色，并在单击另一个链接时将其更改为初始黑色。

Answer 1

您可以动态点击事件到第二个链接，

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

或者在html中添加活动类

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: