Question

点击html顶部导航栏时，我需要帮助将链接设置为活动状态。

导航栏看起来像这样

   <div class="collapse navbar-collapse pull-left" id="navbar-collapse">
    <ul class="nav navbar-nav">
      <li>
          <a href="{{route('home')}}">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Clients <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="{{ route('add.consumer') }}">Add New Client</a></li></i></a></li>
          </ul>
      </li>
    </ul>
   </div>

因此，当我单击“主页”时，它必须突出显示“主页”，当我单击“客户端”时，它必须突出显示“客户端”。我真的不知道该如何实现，因此非常感谢您的帮助。

Answer 1

// when any a link click
$('a').click(function(){
    // if already any element in active status remove it
    $('a').removeClass('active');
    // add active status to this one only
    $(this).addClass('active');
    
})

.active{
background-color:red;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
    <ul class="nav navbar-nav">
      <li>
          <a href="{{route('home')}}">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Clients <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="{{ route('add.consumer') }}">Add New Client</a></li></i></a></li>
          </ul>
      </li>
    </ul>
   </div>

Answer 2

通过JS进行设置是没有意义的，因为一旦它重定向并加载新页面，该设置就会被忘记。您要做的是让PHP检查您的当前路由，并根据此路由分配一个$.extend( true, {}, buttonCommon, {。可以通过class检查来完成：

如果导航到request()->is()，请使用以下命令：

myapp.com/home

这演示了如何通过三元运算符（最适合行内语句）和<li class="{{ request()->is('home') ? 'active': '' }}"> <a href="{{ route('home') }}"> Home @if(request()->is('home')) <span class="sr-only">(current)</span> @endif </a> <li>刀片语法使用。只需确保您的@if()@endif检查与您的路线相匹配，那么is()代表->is("")等，PHP将自动分配Route::get("/", ...);类和active SR元素。

注意；可能有一种方法可以处理命名路由（例如(current)），但是我没有太多使用命名路由，因此我对此并不乐观。另外，最好将route('home')的结果分配给变量，以避免重复代码。

在点击导航链接上设置活动类别

2 个答案: