how to set Bootstrap navbar active class in one page website in Laravel 5.5

I am looking for solutions, but can’t really understand. I’m new in Laravel and I want a simple instruction on how to set the active class in the bootstrap navbar on a one-page website.

Here’s what I’ve done so far, but can’t get it done:

<div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="{{Request::is('/')?'active':''}}"><a href="{{ url('/') }}">Home</a></li>
            <li class="{{Request::is('#about')?'active':''}}"><a href="{{ url('#about') }}">About</a></li>
            <li class="{{Request::is('#contact')?'active':''}}"><a href="{{ url('#contact') }}">Contact</a></li>
        </ul>
    </div>

Answer

You can try like this using jQuery:

<!--Active class on click-->
$(document).ready(function(){
    $('.nav li').click(function(){
        $('.nav li').removeClass('active');
        $(this).addClass('active');
    });
});