Question

我试图制作一个导航栏，它将固定在页面的一侧，并带有无序列表。列表项将通过锚链接到页面。

但是，我希望h2元素根据单击固定导航栏中的哪个元素来更改颜色。

例如：当＆＃34; home＆＃34;单击导航，它将页面锚定到id #home，然后将h2颜色更改为活动颜色。然后关于我们＆＃34;关于我们＆＃34;在导航中单击，它需要从#home中删除活动颜色，并将其添加到#about。

这需要通过jquery添加和删除类（也许??），但我还不够了解。我做了fiddle来了解我的观点。

这是我当前的jquery脚本，它无法为活动锚点添加颜色：

$('#header li a').on('click', function() {
 $('li a.current').removeClass('current');
 $('#1').addClass('current');});

Answer 1

#1位于您的href中，而不是链接的ID。使用this可以获得点击的内容。

现在，如果您想要更改标题，则需要使用哈希

选择它

＆＃13;

$('#header li a').on('click', function() {
  $('li a.current, h2.current').removeClass('current');       //remove the current class from the link and h2
  $(this).addClass('current'); //add current to the link that was clicked
  $(this.hash).addClass('current');  //add class to h2 using the hash which  gives you the #1, #2 in the href of the link
});

＆＃13;

a.current {
   background-color: yellow;  
}

h2.current {
    background-color: green;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  <ul>
    <li><a href="#1">home</a></li>
    <li><a href="#2">about us</a></li>
    <li><a href="#3">directors</a></li>
    <li><a href="#4">admissions</a></li>
  </ul>
</div>
<div>
  <h2 id="1">home</h2>
  <h2 id="2">about us</h2>
  <h2 id="3">directors</h2>
  <h2 id="4">admissions</h2>
</div>

＆＃13;

Answer 2

为了更改与您可以使用的链接中给出的id相同的h2元素的颜色：

$('#header li a').on('click', function() {
    $('li a.current').removeClass('current');
    $($(this).attr('href')).addClass('current');
});

通过单击锚点href来更改标题颜色

2 个答案: