如何在 Laravel 5.5 的一页网站中设置 Bootstrap 导航栏活动类 [英] how to set Bootstrap navbar active class in one page website in Laravel 5.5

问题描述

我正在寻找解决方案，但无法真正理解.我是 Laravel 的新手，我想要一个关于如何在 单页网站上的引导程序导航栏中设置活动类的简单说明.

这是我到目前为止所做的，但无法完成:

<ul class="nav navbar-nav"><li class="{{Request::is('/')?'active':''}}"><a href="{{ url('/') }}">首页</a></li><li class="{{Request::is('#about')?'active':''}}"><a href="{{ url('#about') }}">关于</a></li><li class="{{Request::is('#contact')?'active':''}}"><a href="{{ url('#contact') }}">联系</a></li>

解决方案

你可以像这样使用 jQuery 试试:

$(document).ready(function(){$('.nav li').click(function(){$('.nav li').removeClass('active');$(this).addClass('active');});});

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>

解决方案

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');
    });
});

这篇关于如何在 Laravel 5.5 的一页网站中设置 Bootstrap 导航栏活动类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！