时间戳

首页 > 解决方案 > 如何在使用“包含导航”功能时在导航栏上保持页面活动

php - 如何在使用“包含导航”功能时在导航栏上保持页面活动

问题描述

我将导航存储在一个单独的文件中，并使用该函数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>```

标签： phplaraveltwitter-bootstrap

解决方案

  1. 在导航链接中添加一些额外的代码
<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>
  1. 把它<head> </head>放在你所有网页上的标签之间
 @if(Request::is('route-name')) active @endif"

推荐阅读