Question

我一直在寻找解决方案，但在创建帮助程序时尤其不能理解。我是Laravel的新手，我想要一个关于如何为我的bootstrap导航栏设置活动类的简单或非详细说明。

这是我迄今为止所做的，但无法完成：

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

Answer 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' : '' }}移动到辅助函数/方法。

Answer 2

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

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

或

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

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

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

Answer 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

的更多详情

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

Answer 6

Request::path()返回请求uri，例如：http://localhost/programs，将返回programs，因此您可以执行此操作：

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

Answer 7

在刀片文件上设置一个部分（如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>
...

Answer 8

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

Industry                                   |Excluded  | Output
:------------------------------------------|:---------|:------
A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U  | P,L,K,L  | ?OUTPUT
------------------------------------------ |----------|------
A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U  | P,L,K,L  | ?OUTPUT

Answer 9

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

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

Answer 10

我找到了解决方法：

composer require devmarketer/easynav

更多详细信息：https://github.com/DevMarketer/LaravelEasyNav

Answer 11

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

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

Answer 12

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

Answer 13

最简单的方法是添加类 active :-

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

Answer 14

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

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

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

Answer 15

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

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

你很高兴。

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

15 个答案:

解决方案是