在Laravel 5设置引导导航栏活动类

问题描述 投票:34回答:12

我一直在想四处寻找解决方案,但创建助手时无法体会尤为明显。我在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类。

编辑

对于那些谁正在访问这一职务。我已经得到了一个解决方案,但我不知道它是否整齐。那么它的工作,对我罚款。

<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>
php laravel laravel-5
12个回答
48
投票

您的代码工作正常,但你必须使用它的每一个环节,可以是积极的。这是更好地只返回类的名称,而不是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' : '' }}辅助函数/方法。


1
投票

我找到了解决办法:

composer require devmarketer/easynav

更多细节:https://github.com/DevMarketer/LaravelEasyNav


0
投票

使用Request::is('[level]') ? 'active' : ''在多级的情况下,使用:

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


-1
投票

这很简单:让你的链接使用引导时被激活,所有你需要的是一流的内部链接的if语句,比如:我有我当前的URL作为http://example.com/home

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

你是好去。


37
投票

如果您正在使用命名路由工作。您可以使用您的意见这种方式:

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

要么

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

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


21
投票
<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>

9
投票

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


8
投票

解决方案

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

7
投票

Request::path()返回请求的URI,例如:http://localhost/programs,将返回programs,所以你可以这样做:

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

2
投票

通过@Daniel Antos给出的解决方案是最好的答案,因为我已经找到。丹尼尔Antos先生也警告说,使用*末(约*)。由于同时使用/ *为主页,然后它总是标记为活动(因为所有其他页面/启动)。所以,我用如下所示,为我工作得很好:

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

2
投票

设置一节中刀片的文件(让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>
...

1
投票

我认为这将是简单的,它为我工作。

<li class="{{ Request::segment(1)=='vehicles' ? 'active' : '' }}">
   <a href="/vehicles">Vehicles</a>
</li>
© www.soinside.com 2019 - 2024. All rights reserved.