Javascript 使导航项目在激活时更改颜色

我有html代码

 <header>  <nav> <a href="#" id="menu-icon"></a>
    <ul>
      <li><a href="#"">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

javascript是：

$(document).ready(function(e) {   
$("nav a").on(function(){
    $("nav a").removeClass("active");
    $(this).addClass("active");
});
});

我想要的是，当任何一个按钮都会活动的时候，颜色会是绿色的，而其他颜色将保持相同的颜色。我想把它们放在中间，需要在它们之间有一个小的大空间。 JSFIDLE是：

---

我已经这样做了……但没有工作。

有一些小错误。如果仍然使用jquery，只需使用

click（）

函数

工作小提琴：

完成，正在工作。。。主要问题是点击

$(document).ready(function(e) {   
  $("nav ul li a").on("click", function(){
    $("nav ul li a").each(function () {
      $(this).removeClass("active"); 
    });
    $(this).addClass("active");
  });
});

您有两个错误：

• 首先，正如@Andrew所说，
  应该是

• 其次，在jQuery中使用

  .on

  函数遗漏了目标事件<代码>$（“nav a”）。在（function（）{…上应该是

  $（“nav a”）。在（“click”，function（）{…

  。另外，如果使用代码笔，请确保jQuery正在运行它

小提琴：

使导航链接居中

---

更新的Fiddle:

应该是

这是一个HTML页面，您可以在每个页面上更改HTML，还是用于选项卡？-如果您尝试创建选项卡，那么可以查看jQuery UI选项卡：@salini请检查我的更新答案，使导航链接成为中心您使用引导吗？

$(document).ready(function(e) {   
  $("nav ul li a").on("click", function(){
    $("nav ul li a").each(function () {
      $(this).removeClass("active"); 
    });
    $(this).addClass("active");
  });
});

$(document).ready(function(e) {   
$("nav a").click(function(){
    $("nav a").removeClass("active");
    $(this).addClass("active");
});
});