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>

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

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

单击时使元素突出显示

1 个答案: