html - Keep page active on (non default) nav bar whilst using an 'include nav' function
问题描述
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"
推荐阅读
- javascript - 无法识别用于登录用户的 Firebase 功能。特别是 signInWithEmailAndPassword()
- excel - 使用索引匹配查找文本
- android - gradle缓存路径中sha1代码目录的规则是什么?
- javascript - 如果 Javascript 是单线程的,怎么会同时发生两件事?
- assembly - 在 mips 中创建 Padovan 序列的函数
- django - Django - 当唯一约束失败时,在用户更改字段之前不允许提交表单
- ffmpeg - ffmpeg 编码的 hls 使音频和视频逐渐不同步
- c++ - 将文件中的所有行存储到字符串数组
- c++ - 不同的数据包,联合 - 是正确的用法\验证?
- ios - iOS 13 中的secondaryAudioShouldBeSilencedHint 问题