【发布时间】：2019-09-28 12:38:36
【问题描述】：
我将导航存储在单独的nav.blade.php 文件中，并使用@include('includes.nav') 函数将其调用到每个页面中。这很好用，但我无法突出显示当前页面。
我尝试添加一些其他人在此处描述的代码How to make css a:active work after the click?，但我一直迷路。我是编码新手并且缺少一些东西，我需要一步一步的指南！我认为这也会帮助其他使用引导导航的人。
这是我的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>```
【问题讨论】：
标签： php laravel twitter-bootstrap