使用“包含导航”功能时，在（非默认）导航栏上保持页面活动

Question

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

这是resolved here 漂亮。

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

页面结构

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

然后使用@include('includes.nav_user_admin') 将其调用到每个页面中。

我把它包含在head

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

导航设计

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

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

问题

以上操作给了我一个带有所有标签 bg-secondary 和所有文本蓝色的导航？活动标签和非活动标签之间没有区别。

Answer 1

可以这样做

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

也许我没有按照你的意愿正确设置它的样式。

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