我将导航存储在单独的 nav.blade.php
文件中,并使用 @include('includes.nav')
在每个页面中显示导航。这很好用,但我无法突出显示当前页面。
这是 resolved here漂亮。
我有第二个导航,它不使用 Bootstrap 默认的 active
函数,所以我想我应该在这里解决这个问题。
页面结构
我有一个名为 user_admin
的文件夹,它自己的 Bootstrap 导航存储在一个名为 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 和所有文本蓝色?事件和非事件选项卡之间没有区别。
最佳答案
可以这样做
<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"
关于html - 使用 'include nav' 函数时在(非默认)导航栏上保持页面事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58147073/