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

Question

以下是我的代码-

$("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>

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

Answer 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