如何在使用“包含导航"功能时保持页面在导航栏上的活动状态 [英] How to keep page active on nav bar whilst using an 'include nav' function
本文介绍了如何在使用“包含导航"功能时保持页面在导航栏上的活动状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我将导航存储在单独的nav.blade.php文件中，并使用@include('includes.nav')函数将其调用到每个页面中.效果很好，但我无法突出显示当前页面.
I store my navigation in a separate nav.blade.php file and call it into each page using the @include('includes.nav') function. This works great but I lose the ability to highlight the current page.
I've tried adding some some of the code which others have described here How to make css a:active work after the click? but I keep getting lost. I am new to coding and missing something, I need a step by step guide! I think this will help others using bootstrap navs too.
这是我的nav.blade.php，它使用@include('includes.nav')
<style>
.navbar {
padding: 10px;
font-size: 1.15rem;
font: "Helvetica Neue";
/* font-family: "Helvetica Neue", Helvetica, Arial; */
}
li {
float: left;
text-decoration: none;
padding: 0px;
list-style-type: none;
}
</style>
<!-- Navbar START -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<a class="navbar-brand" href="/">sitename.com </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<!-- Left Navbar Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="welcome">Group Listings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
</ul>
<!-- Right Navbar Links -->
<ul class="navbar-nav ml-auto">
@guest
<li class="nav-item pr-3">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<!-- <a class="dropdown-item" href="{{ route('profile') }}">My Profile</a> -->
<a class="dropdown-item" href="{{ route('home') }}">Dashboard</a>
<a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</nav>
<!-- Navbar END -->
以下是我的其中一个网页示例，说明了此问题
<head>
@include('includes.head')
</head>
<body>
<h1>Page content</h1>
<p>This page calls the navigation from a separate page called head.blade.php. In that page I have a nav with many link, non of which are active. If I make one of them active, then all pages on my website will show that one page as active.</p>
</body>
</html>```
推荐答案
- 在导航链接中添加一些额外的代码
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link @if(Request::is('welcome')) active @endif" href="welcome">Group Listings</a>
</li>
<li class="nav-item">
<a class="nav-link @if(Request::is('about')) active @endif" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link @if(Request::is('contact')) active @endif" href="/contact">Contact</a>
</li>
</ul>
- 将其放在您所有网页上的
<head></head>标记之间
- Put this between the
<head></head>tags on all your webpage
@if(Request::is('route-name')) active @endif"
这篇关于如何在使用“包含导航"功能时保持页面在导航栏上的活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
