Установка активного класса активного бутстрапа в Laravel 5

Мне было интересно искать решения, но не могу понять, особенно при создании помощников. Я новичок в Laravel, и мне нужна простая или, если не подробная инструкция о том, как установить активный класс для моего загрузочного навигатора.

Вот что я сделал до сих пор, но не могу сделать это:

<div class="header clearfix">
        <nav>
          <ul class="nav nav-pills pull-right">
            <li class=""><a href="{{ url('/') }}">Home</a>
            </li>
            <li {{ Request::is('about*') ? ' class="active"' : null }}><a href="{{ url('about') }}">About Us</a>
            </li>
            <li><a href="{{ url('auth/login') }}">Login</a>
            </li>
        </ul>
    </nav>
    <h2 class="">Tobacco Prevention and Control Program</h2>
</div>

ИЗМЕНИТЬ

Настройка class="active" сделает все навигационные таблетки активными. Предполагаемый эффект заключается в том, что только li текущей страницы имеет класс active.

ИЗМЕНИТЬ

Для тех, кто посещает этот пост. Мне удалось получить решение, но я не уверен, что он опрятен. Хорошо, что это работает и хорошо для меня.

<ul class="nav nav-second-level">
                    <li class="{{ Request::segment(1) === 'programs' ? 'active' : null }}">
                        <a href="{{ url('programs' )}}" ></i> Programs</a>
                    </li>
                    <li class="{{ Request::segment(1) === 'beneficiaries' ? 'active' : null }}">
                        <a href="{{url('beneficiaries')}}"> Beneficiaries</a>
                    </li>
                    <li class="{{ Request::segment(1) === 'indicators' ? 'active' : null }}">
                        <a href="{{url('indicators')}}"> Indicators</a>
                    </li>                     
                </ul>

Ответы

Ответ 1

<ul class="nav nav-second-level">
                    <li class="{{ Request::segment(1) === 'programs' ? 'active' : null }}">
                        <a href="{{ url('programs' )}}" ></i> Programs</a>
                    </li>
                    <li class="{{ Request::segment(1) === 'beneficiaries' ? 'active' : null }}">
                        <a href="{{url('beneficiaries')}}"> Beneficiaries</a>
                    </li>
                    <li class="{{ Request::segment(1) === 'indicators' ? 'active' : null }}">
                        <a href="{{url('indicators')}}"> Indicators</a>
                    </li>                     
                </ul>

Ответ 2

Ваш код работает нормально, но вы должны использовать его для каждой ссылки, которая может быть активной. Лучше возвращать только имя класса, а не class="...", чтобы вы могли добавлять другие классы.

Будьте осторожны при использовании * в конце (about*). Если вы используете /* для домашней страницы, он всегда будет помечен как активный (поскольку каждая другая страница начинается с /).

<ul class="nav nav-pills pull-right">
    <li class="{{ Request::is('/') ? 'active' : '' }}">
        <a href="{{ url('/') }}">Home</a>
    </li>
    <li class="{{ Request::is('about') ? 'active' : '' }}">
        <a href="{{ url('about') }}">About Us</a>
    </li>
    <li class="{{ Request::is('auth/login') ? 'active' : '' }}">
        <a href="{{ url('auth/login') }}">Login</a>
    </li>
</ul>

Вы также можете переместить {{ Request::is('/') ? 'active' : '' }} на вспомогательную функцию/метод.

Ответ 3

Если вы работаете с именованными маршрутами. Вы можете использовать этот подход в своих взглядах:

{{ Route::currentRouteNamed('about') ? 'active' : '' }}

или же

{{ Route::is('about') ? 'active' : '' }}

Illuminate\Routing\Router#is(...) является псевдонимом Illuminate\Routing\Router#currentRouteNamed(...).

Ответ 4

решение

<ul class="nav navbar-nav pull-right">
      <li class="{{ Request::is('/') ? 'active' : '' }}">
         <a href="{{ url('/') }}">Home</a>
     </li>
      <li class="{{ Request::is('about') ? 'active' : '' }}">
         <a href="{{ url('/about') }}">About Us</a>
     </li>
      <li class="{{ Request::is('whyus') ? 'active' : '' }}">
         <a href="{{ url('/whyus') }}">Why Us</a>
      </li>
 </ul>

Ответ 5

Бросьте это в свой helper.php

function set_active($path, $active = 'active') {

    return call_user_func_array('Request::is', (array)$path) ? $active : '';

}

Используйте его так

<li class="{{ set_active(['about*']) }}"><a href="{{ url('about') }}">About Us</a>

Вы можете передать одну строку в маршрут или несколько и подстановочные знаки.

Подробнее о Laravel Trick

Ответ 6

Request::path() возвращает uri запроса, например: http://localhost/programs, вернет programs, чтобы вы могли сделать это:

 <li class="{{ Request::path() ==  'programs' ? 'active' : ''  }}">
                    <a href="{{ url('programs') }}"></i> Programs</a>
                </li>

Ответ 7

Я думаю, это было бы просто, и это работает для меня.

<li class="{{ Request::segment(1)=='vehicles' ? 'active' : '' }}">
   <a href="/vehicles">Vehicles</a>
</li>

Ответ 8

Решение, данное @Daniel Antos, является лучшим ответом, как я обнаружил. Г-н Даниал Антос также предупредил об использовании * в конце (о *). Поскольку при использовании /* для домашней страницы она всегда помечается как активная (потому что каждая другая страница начинается с /). Итак, я использовал следующее, и он работал нормально для меня:

{{ (Request::is('users') || Request::is('users/*') ? 'active open' : '') }}

Ответ 9

Я нашел решение:

composer require devmarketer/easynav

Более подробная информация: https://github.com/DevMarketer/LaravelEasyNav

Ответ 10

Установите раздел в своем блейд файле (пусть home.blade.php) как

@section('Home', 'my-active-class')

И установите раздел в вашем другом файле блейда (пусть about.blade.php) как

@section('About', 'my-active-class')

и выдайте этот раздел на app.blade.php (предположим, вы выходите из app.blade.php)

...
<li class="@yield('Home')"><a href="#">Home</a></li>
<li class="@yield('About')"><a href="#">About</a></li>
...

Ответ 11

использовать Request::is('[level]')? 'active': '' Request::is('[level]')? 'active': '' В случае многоуровневого использования используйте:

Request::is('[level]', '[level]/*')? 'active': ''

Ответ 12

Это просто: чтобы ваши ссылки были активными при использовании начальной загрузки, все, что вам нужно, это оператор if внутри ссылки на класс, например: у меня текущий URL-адрес как http://example.com/home

 <li class="{{ Request::url() == url('/home') ? 'active' : '' }}"><a href="/home" ></li>
     Home
 </a>

и ты в порядке.