Question

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

css代码：

a {
    color: #7e7e7e;
    text-decoration: none;
    font-weight: bold;
}
a:hover {
    color: #444;
}

a.active {
  color: #82b965;
}


nav {
    float: right;
    padding: 20px;
}


ul {
    list-style: none;
}
li {
    display: inline-block;
    float: left;
    padding: 10px
}
.current {
    color: #333333;
}

和javascript是：

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

我想要的是当任何按钮激活时，颜色将变为绿色，而其他按钮将保持相同的颜色。我想将它们放在中间，并且需要在它们之间留出很小的空间。 jsfiddle是： jsfiddle code

我做过这个......但是没有工作..

Answer 1

有一些小错误。如果你使用jquery，只需使用click()函数。

工作小提琴：

https://jsfiddle.net/94b94u1g/

Answer 2

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

小提琴：https://jsfiddle.net/130w0y9c/

制作导航链接中心

更新小提琴：https://jsfiddle.net/130w0y9c/1/

Answer 3

http://codepen.io/anon/pen/QbZdWr完成，工作......主要问题是点击

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

Answer 4

你有两个错误：

首先，正如@Andrew所说，<a href="#"">Home</a>应为<a href="#">Home</a>。
其次，您在jQuery中使用.on函数错过了您的目标事件。 $("nav a").on(function(){...应该是$("nav a").on("click", function(){...。另外，如果您要使用codepen，请确保运行jQuery。

http://codepen.io/anon/pen/MwPJWZ

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

4 个答案: