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

【问题标题】：Setting Bootstrap navbar active class in Laravel 5在 Laravel 5 中设置 Bootstrap 导航栏活动类
【发布时间】：2015-04-24 02:12:24
【问题描述】：

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

【问题讨论】：

@krisdestruction OP 可能只想在当前的nav li 上渲染 class="active"
stackoverflow.com/questions/17266909/…的可能重复
@Ajoy 好的，我刚刚在审核队列中，看起来需要进一步澄清，仅此而已
@krisdestruction 对于以前没有处理过类似情况的人来说，这个问题并不清楚。我现在就编辑它
我已经编辑了你的问题。随意删除它或用你自己的话修改它！

标签： php laravel laravel-5

【解决方案1】：

您的代码运行良好，但您必须将它用于每个可以激活的链接。最好只返回类名，而不是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' : '' }} 移动到辅助函数/方法。

【讨论】：

使用url("about") 代替href 有什么好处，而不是只输入路径/about，这样会更短？

【解决方案2】：

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

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

或

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

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

【讨论】：

使用命名路由时的最佳解决方案
我认为如果你使用命名路由是最好的方法。
这适用于我的 Laravel 7 刀片模板。我添加到类选择器。
商业机会

【解决方案3】：

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

【讨论】：

【解决方案4】：

把这个扔到你的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上查看更多详情

【讨论】：

我使用了类似的方法，但是如果我有这样的动态 URL id 怎么办.. /company/7431/departments.在这里我需要以某种方式使用 $company->id 来表示 7431。有什么想法吗？

【解决方案5】：

解决办法是

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

【讨论】：

【解决方案6】：

Request::path()返回请求uri，例如：http://localhost/programs，会返回programs，所以你可以这样做：

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

【讨论】：

真正的解决方案。特别是对于带有下拉菜单的菜单。

【解决方案7】：

在你的刀片文件（let 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>
...

【讨论】：

【解决方案8】：

这很简单：要让您的链接在使用引导程序时处于活动状态，您所需要的只是类链接中的 if 语句，例如：我的当前 url 为 http://example.com/home

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

你可以走了。

【讨论】：

class="{{ Request::url() == url('/home') ? 'active' : '' }}"

【解决方案9】：

@Daniel Antos 给出的解决方案是我发现的最佳答案。 Danial Antos 先生还警告说，在结尾使用 *（约 *）。因为在主页使用 /* 时，它总是被标记为活动的（因为每隔一个页面都以 / 开头）。所以，我使用如下，它对我来说很好：

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

【讨论】：

我不得不使用点 * 而不是 /*，所以 users.*

【解决方案10】：

我认为这很简单，而且对我有用。

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

【讨论】：

像 {{ Request::segment(1)=='vehicles.$id' 这样的动态 id 呢？ '活跃' : '' }}

【解决方案11】：

我找到了解决办法：

composer require devmarketer/easynav

【讨论】：

【解决方案12】：

使用 Request::is('[level]') ? 'active' : '' 如果是多级，请使用：

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

【讨论】：

【解决方案13】：

<ul class="nav nav-second-level">
                    <li class={{ Request::is('/') ? 'active' : '' }}>
                        <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>

【讨论】：

【解决方案14】：

最简单的方法是添加活动类：-

@if (request()->routeIs('dashboard'))
   class="active"
@endif

【讨论】：

【解决方案15】：

如果我们设法获取 URL 路径，我们可以将其与路由进行比较，并在那里放置一个活动类。

 {{'/'==request()->path()?'active':''}}

 {{'about'==request()->path()?'active':''}}

【讨论】：