jquery - 事件链接上的 CSS 样式会短暂工作然后停止

Question

我有以下列表中的链接。单击它们时样式有效，但当页面加载到 href 位置时样式不显示

$('.sidebar-nav li').on('click', function() {
  $('li').removeClass('hello');
  $(this).addClass('hello');
});

.hello {
  border-bottom: 2px solid blue !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sidebar-nav">
  <li><i class="icon-home"></i><a href="{{route('dashboard')}}">Home</a></li>
  <li><i class="icon-user"></i><a href=""> Profile</a></li>
  <li><i class="icon-tag"></i><a href="">Tags</a>
    <ul id="task-ul">
      <li><a style="color:#e62a76" href=""><i class="icon-circle"></i>Personal</a></li>
      <li><a style="color:#774898" href=""><i class="icon-circle"></i> Meetings</a></li>
      <li><a style="color:turquoise" href=""><i class="icon-circle"></i>Email/call</a></li>
      <li><a style="color:#fbb901" href=""><i class="icon-circle"></i> Follow up</a></li>
    </ul>
  </li>
  <li><i class="icon-calendar"></i><a href="">Events</a></li>
  <li><i class="icon-bar-chart"></i><a href="">Productivity</a></li>
  <li><i class="icon-signout"></i><a href="">Logout</a></li>
</ul>
</div>
<!--end of sidebar-->

Answer 1

通过单击链接，您将执行转到新 url 的操作，这将重新加载页面并因此重置所有样式。

在您的特定情况下，我会考虑这样的事情:

$('.sidebar-nav li a').on('click', function(e) {
  e.preventDefault();
  $('.sidebar-nav li a').removeClass('hello');
  $(this).addClass('hello');
});

通过将事件处理程序放在 a 标记上，您可以对事件运行 preventDefault()，这将阻止页面移动到新的 url 并重新加载.

如果您仍然希望更改 li 上的类而不是 a 标签，那么您可以做一些 DOM 遍历来访问 li 你想要的。像 $(this).parent('li').addClass() 这样的东西，我认为会做到。