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

时间:2022-11-25
本文介绍了在 Laravel 5 中设置 Bootstrap 导航栏活动类的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

<导航><ul class="nav nav-pills pull-right"><li class=""><a href="{{ url('/') }}">首页</a><li {{ Request::is('about*') ?'类=活动"': null }}><a href="{{ url('about') }}>关于我们</a><li><a href={{ url('auth/login') }}">登录</a></nav><h2 class="">烟草预防和控制计划</h2>

编辑

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

解决方案

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.

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 li of the current page have the active class.

解决方案

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

这篇关于在 Laravel 5 中设置 Bootstrap 导航栏活动类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持html5模板网!

上一篇:Laravel 5.4 禁用注册路由 下一篇:很好的 Laravel 单点登录解决方案

相关文章

最新文章