Javascript 单击时保持导航元素高亮显示

我一直在尝试使用以下代码使我的导航元素在单击后保持高亮显示。我的页面不会重新加载，但会在一个页面上显示所有内容-显示这应该可以工作。我对选择器有问题吗？还是别的什么问题？看起来它应该对我有用

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>

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

.active {
    background-color: #f43333;
}

---

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

尝试以下操作（加载DOM时将设置处理程序）：

当然，您还需要在

代码段之前包含jQuery

这是一把小提琴：

---

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

尝试以下操作（加载DOM时将设置处理程序）：

当然，您还需要在

代码段之前包含jQuery

这是一把小提琴：

---

我不明白您需要什么，但就我的理解而言，您只需使用

css

：focus

选择器即可

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

---

尝试演示

我不明白您需要什么，但就我的理解而言，您只需使用

css

：focus

选择器即可

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

---

试用演示版

我看不出有什么问题。。适用于meThis在JSFIDLE-JQuery 3.1.1中对我来说很好您所需要的一切就是lastetjquery[]您在哪里定义了js？也许在html代码之前？以防万一…我看不出有什么问题。。适用于meThis在JSFIDLE-JQuery 3.1.1中对我来说很好您所需要的一切就是lastetjquery[]您在哪里定义了js？可能在html代码之前，以防万一……但这样，在用户单击文档的其他元素后，活动元素将不会保持活动或焦点！但这样，在用户单击文档的其他元素后，活动元素将不会保持活动或焦点！