单击时保持元素突出显示答案

【问题标题】：Keep an element highlighted when clicked单击时保持元素突出显示
【发布时间】：2018-12-06 10:35:05
【问题描述】：

以下是我的代码-

$("li span").click(function() {
   $("li span").each(function() {
          $(this).css("background-color", "transparent");
   });
  $(this).css("background-color", "#ff3300");
});

.highlight {
  background: green;
}
span {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="left-menu-inner scroll-pane">
  <ul class="left-menu-list left-menu-list-root list-unstyled">
      <li class="left-menu-list-active">
          <div class="left-menu-link">
          <a href="dashboard">
            <i class="left-menu-link-icon icmn-home2"><!-- --></i>
            <span class="menu-top-hidden">Dashboard</span>
          </a>
      </li>
    </ul>
</div>

另外，我尝试了另一个代码如下-

<script>
// Add active class to the current button (highlight it)
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
 btns[i].addEventListener("click", function() {
   var current = document.getElementsByClassName("active");
   current[0].className = current[0].className.replace(" active", "");
   this.className += " active";
 });
}
</script>

但是这两个代码都只是在鼠标悬停时突出显示标签，而不是在点击时保持突出显示。

【问题讨论】：

这已经突出显示了，只需将 href 替换为
CSS Button Highlight post click的可能重复
感谢您的解决方案，我试过了，但它仍然不适合我。请问还有其他解决办法吗？
您能否详细说明“仍然无法正常工作”？怎么了？因为此代码正在运行，它以红色背景突出显示，然后重定向到另一个页面。此外，它没有像你说的那样在鼠标悬停时突出显示。
由于您没有放置 event.preventDefault() 页面将在单击按钮时重新加载，可能会再次删除所有按钮的“活动”类，因为浏览器不会保持那样的状态跨度>

标签： javascript jquery html css

【解决方案1】：

在您使用“a”标签的上方，所以如果我们单击“a”标签，我们知道它会跳转到“href”中提到的 url，但可以通过将 url 更改为“#”来完成，正如我在下面的示例中尝试的那样, 您也可以通过将“a”标签替换为“p”等任何其他标签来完成

`<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="left-menu-inner scroll-pane">
  <ul class="left-menu-list left-menu-list-root list-unstyled">
      <li class="left-menu-list-active">
          <div class="left-menu-link">
          <a href="#">
            <i class="left-menu-link-icon icmn-home2"><!-- --></i>
            <span class="menu-top-hidden">Dashboard</span>
          </a>
      </li>
    </ul>
</div>`

Click here for Demo

【讨论】：