在 Laravel 5 中设置 Bootstrap 导航栏活动类

php laravel laravel-5

2022-08-30 10:13:04

我一直在想寻找解决方案，但无法真正理解，特别是在创建助手时。我是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"liactive

答案 1

如果您正在使用命名路由。您可以在视图中使用此方法：

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

或

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

是的别名。Illuminate\Routing\Router#is(...)Illuminate\Routing\Router#currentRouteNamed(...)

答案 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' : '' }}