javascript - 单击时保持导航元素突出显示

Question

我一直在尝试使用以下代码让我的导航元素在单击后保持突出显示。我的页面不会重新加载，但会在一页上显示所有内容 - 表明这应该有效。我的选择器有问题吗？还是有其他问题？看起来它应该对我有用......

HTML:

<div class="admin-main-area">
   <div class="admin-left-nav">
      <ul id="admin-left-links">
         <li><a class="link" href="#">Orders</a></li>
         <li><a class="link" href="#">Reports</a></li>
         <li><a class="link" href="#">Add Product</a></li>
         <li><a class="link" href="#">Update Products</a></li>
         <li><a class="link" href="#">Update Stock</a></li>
         <li><a class="link" href="#">Update Pricing</a></li>
      </ul>
   </div>
   <div  class="admin-content-area">
      <p>this is some content</p>
   </div>
</div>

Javascript:

<script>
$('a.link').click(function(){
    $('a.link').removeClass("active");
    $(this).addClass("active");
});
</script>

CSS:

.active {
    background-color: #f43333;
}

Answer 1

在您设置点击事件处理程序时，链接尚未加载到 DOM 中。

试试这个(它将在加载 DOM 时设置处理程序):

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

})

当然，您还需要在 <script> 之前包含 jQuery片段

这是一个有效的 fiddle : https://jsfiddle.net/nsjfe5g1/