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

以下是我的代码-

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

但是这两个代码仅在鼠标悬停时突出显示标签，而在onclick时不突出显示标签。

最佳答案

在您使用“ 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

关于javascript - 单击时使元素保持突出显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53649441/