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

Setting Bootstrap navbar active class in Laravel 5

提问by Ikong

I've been wondering around looking for solutions, but can't really understand especially when creating helpers. I'm new in Laravel and I want a simple or if not a detailed instruction on how to set the active class for my bootstrap navbar.

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

Here's what I've done so far, but can't get it done:

这是我到目前为止所做的，但无法完成：

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

EDIT

编辑

Setting class="active"will make all nav-pills active. The intended effect is that only the liof the current page have the activeclass.

设置class="active"将使所有导航药丸处于活动状态。预期的效果是只有li当前页面的 具有active该类。

EDIT

编辑

For those who are visiting this post. I have managed to get a solution, but I'm not sure if it is neat. Well it's working and fine for me.

对于那些访问这篇文章的人。我设法得到了一个解决方案，但我不确定它是否整洁。嗯，它对我来说很好用。

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

采纳答案by Ikong

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

回答by Daniel Antos

Your code is working fine, but you have to use it for every link that can be active. It is better to return only class name, not class="..."so you can add other classes.

您的代码运行良好，但您必须将它用于每个可以处于活动状态的链接。最好只返回类名，而不是class="..."这样你就可以添加其他类。

Be careful when using *at the end (about*). If you use /*for home page then it will always be marked as active (because every other page starts with /).

*末尾使用时要小心（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>

You can also move {{ Request::is('/') ? 'active' : '' }}to helper function/method.

您还可以转到{{ Request::is('/') ? 'active' : '' }}辅助函数/方法。

回答by sparkle

If you are working with named routes. You can use this approach in your views:

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

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

or

或者

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

The Illuminate\Routing\Router#is(...)is an alias of the Illuminate\Routing\Router#currentRouteNamed(...).

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

回答by Set Kyar Wa Lar

Throw this in your helper.php

把这个扔进你的 helper.php

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

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

}

Use it like so

像这样使用它

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

You can pass a single string to a route or multiple and wildcards.

您可以将单个字符串传递给路由或多个通配符。

See more detail on Laravel Trick

查看有关Laravel 技巧的更多详细信息

回答by Amit Meena

solution is

解决方案是

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

回答by JP Blanco

Request::path()returns the request uri, for example: http://localhost/programs, will return programs, so you can do this:

Request::path()返回请求 uri，例如：http://localhost/programs，将返回programs，因此您可以这样做：

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

回答by Muminur Rahman

The solution given by @Daniel Antos is best answer, as I have found. Mr. Danial Antos also warned about using * at the end (about*). Because while using /* for home page then it is always marked as active (because every other page starts with /). So, I have used as follows and it worked fine for me:

正如我发现的那样，@Daniel Antos 给出的解决方案是最好的答案。Danial Antos 先生还警告过在末尾使用 * (about*)。因为当使用 /* 作为主页时，它总是被标记为活动的（因为所有其他页面都以 / 开头）。所以，我使用了以下方法，对我来说效果很好：

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

回答by Daud khan

Set a section on your blade file (let home.blade.php) like

在您的刀片文件上设置一个部分（让 home.blade.php），例如

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

And set a section on your another blade file (let about.blade.php) like

并在您的另一个刀片文件（让 about.blade.php）上设置一个部分，例如

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

and yield this section on app.blade.php (Suppose you are extending from app.blade.php)

并在 app.blade.php 上生成此部分（假设您是从 app.blade.php 扩展的）

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

回答by Drew B. Dennis

I think this would be simple, and it works for me.

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

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

回答by Bijaya Kumar Oli

I found the solution:

我找到了解决方案：

composer require devmarketer/easynav

More details : https://github.com/DevMarketer/LaravelEasyNav

更多详情：https: //github.com/DevMarketer/LaravelEasyNav