使用“包含导航"功能时，在(非默认)导航栏上保持页面处于活动状态

问题描述

我将导航存储在单独的 nav.blade.php 文件中，并使用 @include('includes.nav') 在每个页面中显示导航.这很好用，但我无法突出显示当前页面.

这是在这里解决很漂亮.

我有第二个导航不使用引导默认active功能，所以我想我会在这里解决这个问题.

页面结构

我有一个名为 user_admin 的文件夹，它自己的引导程序导航存储在一个名为 nav_user_admin.blade.php 的文件中.

然后使用 @include('includes.nav_user_admin') 调用每个页面.

我将其包含在 head

中

@if(Request::is('route-name')) 活动@endif

导航设计

每个标签都有 bg-secondary 和 text-light.当页面处于活动状态时，我将如何显示 bg-white 并删除 text-light 功能?

<a class="nav-link @if(Request::is('home')) active @endif" href="home" id="corner1" class="list-group-item d-flex justify-content- align-items-center list-group-item-light list-group-item-action ">仪表板</a><a class="nav-link @if(Request::is('groups')) active @endif" href="groups" class="bg-secondary text-light list-group-item d-flex justify-content-between align-items-center list-group-item-light list-group-item-action">我创建的组3</a><a class="nav-link @if(Request::is('')) active @endif" href="" class="bg-secondary text-light list-group-item d-flex justify-content-在 align-items-center list-group-item-light list-group-item-action">我加入的组之间8</span></a＞<a class="nav-link @if(Request::is('settings')) active @endif" href="settings" class="bg-secondary text-light list-group-item d-flex justify-content-between align-items-center list-group-item-light list-group-item-action">账户设置</a><a class="nav-link @if(Request::is('profile_settings')) active @endif" href="profile_settings" class="bg-secondary text-light list-group-item d-flex justify-内容之间 align-items-center list-group-item-light list-group-item-action">配置文件设置</a>

问题

执行上述操作后，我可以使用所有选项卡 bg-secondary 和所有文本为蓝色进行导航?活动和非活动选项卡之间没有区别.

解决方案

可以这样做

<a class="nav-link list-group-item d-flex justify-content-between align-items-center list-group-item-light list-group-item-action @if(Request::is('settings')) bg-white @else bg-secondary text-light @endif" href="settings">账户设置</a>

也许我没有按照你的意愿正确地设计它.

@if(Request::is('settings')) 活动时需要的类@else 不活动时的类@endif"

I store my navigation in a separate nav.blade.php file and use @include('includes.nav') to show the navigation in each page. This works great but I lose the ability to highlight the current pages.

This was resolved here beautifully.

I have a second navigation which doesn't use the bootstrap default active function, so I thought I'd address this here.

Page structure

I have a folder called user_admin with it's own bootstrap navigation stored in a file called nav_user_admin.blade.php.

This is then called into each page using @include('includes.nav_user_admin').

I include this in the head

@if(Request::is('route-name')) active @endif

Nav design

Each tab has bg-secondary with text-light. How would I then show bg-white and remove the text-light function when page active?

<div class="list-group list-group-flush ">
    <a class="nav-link @if(Request::is('home')) active @endif" href="home" id="corner1" class="list-group-item d-flex justify-content-between align-items-center list-group-item-light list-group-item-action ">Dashboard</a>
    <a class="nav-link @if(Request::is('groups')) active @endif" href="groups" class="bg-secondary text-light list-group-item d-flex justify-content-between align-items-center list-group-item-light list-group-item-action">Groups I've Created<span class="badge badge-light badge-pill">3</span></a>
    <a class="nav-link @if(Request::is('')) active @endif" href="" class="bg-secondary text-light list-group-item d-flex justify-content-between align-items-center list-group-item-light list-group-item-action">Groups I've Joined<span class="badge badge-light badge-pill">8</span></a>
    <a class="nav-link @if(Request::is('settings')) active @endif" href="settings" class="bg-secondary text-light list-group-item d-flex justify-content-between align-items-center list-group-item-light list-group-item-action">Account Settings</a>
    <a class="nav-link @if(Request::is('profile_settings')) active @endif" href="profile_settings" class="bg-secondary text-light list-group-item d-flex justify-content-between align-items-center list-group-item-light list-group-item-action">Profile Settings</a>
</div>

The problem

Doing the above gives me a navigation with all tabs bg-secondary and all text blue? There is no difference between active and non active tabs.

解决方案

Could be done like this

<a class="nav-link list-group-item d-flex justify-content-between align-items-center list-group-item-light list-group-item-action @if(Request::is('settings')) bg-white @else bg-secondary text-light @endif" href="settings">Account Settings</a>

Maybe I haven't styled it properly as you want but.

@if(Request::is('settings')) the classes you want when it is active @else the classes when it is not active @endif"

这篇关于使用“包含导航"功能时，在(非默认)导航栏上保持页面处于活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！