Я сохраняю навигацию в отдельном файле nav.blade.php и вызываю ее на каждой странице, используя функцию @include('includes.nav').Это прекрасно работает, но я теряю возможность выделять текущую страницу.
Я попытался добавить часть кода, который другие описали здесь Как заставить css a: active работать после клика? но я продолжаю теряться.Я новичок в кодировании и чего-то не хватает, мне нужно пошаговое руководство!Я думаю, что это поможет другим, использующим навигационные системы начальной загрузки.
Вот мой 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>```