Question

我一直在尝试使用以下代码让我的nav元素在点击后保持高亮显示。我的页面不会重新加载，但会在一个页面上显示所有内容 - 显示这应该有效。我有选择器的问题吗？还是别的错了？它看起来应该对我有用......

HTML：

使用Javascript：

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

CSS：

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

Answer 1

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

试试这个（它会在加载DOM时设置处理程序）：

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

})

当然，您还需要在<script>代码段

之前添加jQuery

这是一个工作小提琴： https://jsfiddle.net/nsjfe5g1/

Answer 2

我不了解您的需求，但根据我的理解，您只需使用css :focus选择器

执行此操作

a:focus {
  background-color: #f43333;
}

尝试使用演示https://jsfiddle.net/nsjfe5g1/2/

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

2 个答案: