Установить класс активным по ссылке навигации

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

Настройка через JS довольно бессмысленна, поскольку, как только она перенаправит и загрузит новую страницу, эта настройка будет забыта. Вы хотите, чтобы PHP проверил ваш текущий маршрут и назначил 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("") для Route::get("/", ...); и т. Д., И т. Д., И PHP автоматически назначит класс active и элемент (current) SR.

Примечание; Вероятно, есть способ справиться с этим для именованных маршрутов (например, route('home')), но я не слишком часто использовал именованные маршруты, поэтому я не уверен в этом. Кроме того, может быть лучше присвоить результат request()->is('home') переменной, чтобы избежать повторения кода.

Answer 2

// 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>