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

Question

人帮帮我...单击导航栏菜单选项时，我试图突出显示当前页面。我尝试了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帮助，但仍然无法解决。 ...

Answer 1

替换下面的代码，然后将CSS添加到“活动”类中。不需要JS。