活动链接上的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

我认为您正在使用Laravel框架因此，您可以尝试使用此方法，而不是使用jquery添加Class hello

    @php
        $current_route_name = Route::currentRouteName();
    @endphp

    <ul class="sidebar-nav">
        <li <?php  if($current_route_name  == 'dashboard') echo 'class="hello"' ?> ><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>
将获得当前路线名称并与锚点路线名称匹配并基于该路线添加类别

Answer 2

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

Answer 3

您不应该通过使用jquery / javascript来以编程方式添加CSS类的活动链接。您可以使用CSS来做到这一点：