在 php laravel web 应用程序中突出显示导航栏上的当前页面答案

【问题标题】：Highlight the current page on navbar in php laravel web application在 php laravel web 应用程序中突出显示导航栏上的当前页面
【发布时间】：2020-02-04 02:30:53
【问题描述】：

大家帮帮我吧... 单击导航栏菜单选项时，我试图突出显示当前页面。我尝试了 javascript 代码、php 代码和 laravel 帮助仍然无法弄清楚。请帮助我..

<script>
window.addEventListener('scroll', event => { 
    let nav = document.querySelector('.nav-container'); 

    (window.scrollY >= 510) ? nav.classList.add('scroll') : nav.classList.remove('scroll');
});

     $(document).ready(function () {
        $("#tab-content li a").each(function(){
            //set all menu items to 'black
            $(this).css("color","white");

            var linkPath=$(this).attr("href");
            var relativePath=window.location.pathname.replace('http://'+window.location.hostname,'');

            //set the <a> with the same path as the current address to blue
            if(linkPath==relativePath)
                $(this).css("color","gray");
        });
});
    </script>



<main id="main"> 

   <!-- Header -->  
   <!-- Navigation -->
   <header>

    <div class="nav-container">
        <nav class="nav-checkbox">
        <a href="#" class="nav-logo">sample company</a>
            <input type="checkbox" id="tab-nav" class="tab-nav">
            <label for="tab-nav" class="tab-nav-label">Menu</label>
            <ul class="tab-content" id="tab">
                <li ><a class="active" href="{{ url('/') }}">Home</a></li>
                <li><a href="{{ ('/testimonials') }}">Testimonials</a></li>
                <li><a href="{{ url('/services') }}">Services</a></li>
                <li><a href="{{ url('/team') }}">Team</a></li>
                <li><a href="{{ url('/blog') }}">Blog</a></li>
                <li><a href="{{ url('/about') }}">About Us</a></li>
                <li><a href="{{ url('/contact') }}">Contact Us</a></li>
            </ul>
        </nav>
     </div>
  </header>  
</main>

【问题讨论】：

标签： javascript php laravel frontend navigationbar

【解决方案1】：

替换下面的代码并将您的 CSS 添加到“活动”类。不需要 JS。

<li><a class="{{Request::is('/') ? 'active' : ''}}" href="{{ url('/') }}">Home</a></li>
                <li><a class="{{(Request::is('testimonials') || Request::is('testimonials/*')) ? 'active' : ''}}" href="{{ ('/testimonials') }}">Testimonials</a></li>
                <li><a class="{{(Request::is('services') || Request::is('services/*')) ? 'active' : ''}}" href="{{ url('/services') }}">Services</a></li>
                <li><a class="{{(Request::is('team') || Request::is('team/*')) ? 'active' : ''}}" href="{{ url('/team') }}">Team</a></li>
                <li><a class="{{(Request::is('blog') || Request::is('blog/*')) ? 'active' : ''}}" href="{{ url('/blog') }}">Blog</a></li>
                <li><a class="{{(Request::is('about') || Request::is('about/*')) ? 'active' : ''}}" href="{{ url('/about') }}">About Us</a></li>
                <li><a class="{{(Request::is('contact') || Request::is('contact/*')) ? 'active' : ''}}" href="{{ url('/contact') }}">Contact Us</a></li>

【讨论】：