我将导航存储在单独的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.
我尝试添加一些其他人在这里描述的代码点击后如何使css a:active工作?，但是我一直迷路.我是编码和缺少东西的新手，我需要逐步的指导！我认为这也会对使用引导导航的其他人有所帮助.
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 </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>
@if(Request::is('route-name')) active @endif"
更多推荐
如何在使用“包含导航"功能时保持页面在导航栏上的活动状态
发布评论