单击标题项时，如何在 Laravel 中添加活动类？答案

【问题标题】：How can I add active class in Laravel on header items when they're clicked?单击标题项时，如何在 Laravel 中添加活动类？
【发布时间】：2019-07-07 13:35:56
【问题描述】：

我一直在尝试在我的标题项目被点击时获得活动类。我有一个菜单，菜单中的 li 项指向我网站上的特定页面。现在我想在它们被点击时添加活动类，当网站只有 HTML 和 CSS 时很容易，但我如何在 php 中做到这一点，更具体地说是 Laravel？我在所有页面中都包含我的标题。

我的 header.php 代码：

<div class="container">
<div class="row">

 <div class="col-md-10 col-sm-12 col-xs-12" style="width: 43.333333% !important;position: relative;right: 1.35rem;margin-bottom: 12px;"> 

<!-- Nav start -->

<div class="navbar navbar-default" role="navigation">
<div class="navbar-collapse collapse" id="nav-main">
<ul class="nav navbar-nav">
                            <li class="{{ Request::url() == route('index') ? 'active' : '' }}"><a id="newmenu" style="background-color: rgba(255,255,255,0.1);" href="{{url('/')}}">{{__('Beauty treatments')}}</a> </li>
                            @foreach($show_in_top_menu as $top_menu) @php $cmsContent = App\CmsContent::getContentBySlug($top_menu->page_slug); @endphp
                            <li class="{{ Request::url() == route('cms', $top_menu->page_slug) ? 'active' : '' }}"><a id="newmenu" href="/demo/public/jobs?country_id%5B%5D=231">{{__('Hair')}}</a> </li>
                            @endforeach 

                            <li class="{{ Request::url() == route('index') ? 'active' : '' }}"><a id="newmenu" href="{{url('/')}}">{{__('Hands')}}</a> </li>
                             <li class="{{ Request::url() == route('index') ? 'active' : '' }}"><a id="newmenu" href="{{url('/')}}">{{__('Spa Services')}}</a> </li>

</ul>

<!-- Nav collapes end --> 

 </div>
<div class="clearfix"></div>
</div>

<!-- Nav end --> 

</div>
</div>

<!-- row end --> 
</div>

CSS：

#menunew:active {background-color: #07c;color: #fff;}

JS：

 $('li a').click(function(e) {
        var $this = $(this);
        e.preventDefault();
        $('a').removeClass('active');
        $(this).addClass('active');
    });

谁能帮帮我，我卡住了，我不知道该怎么办，我尝试了这里的示例，但似乎没有任何效果，祝你好运！

【问题讨论】：

如果链接重定向到新页面，您将无法使用 jquery/javascipt 使它们处于活动状态，我使用在控制器中设置的变量进行活动部分，然后在标题中检查打印前
Laravel active menu item for url included parameters的可能重复
有人可以为此做一个我的代码示例吗？我一直在尝试@GingerCSSWizard 发送的线程中的东西，但我无法实现。

标签： javascript php html css laravel

【解决方案1】：

试试下面，这是来自链接的线程和https://laravel.com/docs/5.4/requests#request-path-and-method：

<div class="container">
  <div class="row">

    <div class="col-md-10 col-sm-12 col-xs-12" style="width: 43.333333% !important;position: relative;right: 1.35rem;margin-bottom: 12px;">

      <!-- Nav start -->

      <div class="navbar navbar-default" role="navigation">
        <div class="navbar-collapse collapse" id="nav-main">
          <ul class="nav navbar-nav">
            <li class="{{ request()->is('/') ? 'active' : '' }}"><a id="newmenu" style="background-color: rgba(255,255,255,0.1);" href="{{url('/')}}">{{__('Beauty treatments')}}</a> </li>
            @foreach($show_in_top_menu as $top_menu) @php $cmsContent = App\CmsContent::getContentBySlug($top_menu->page_slug); @endphp
            <li class="{{ request()->is('cms/*') ? 'active' : '' }}"><a id="newmenu" href="/demo/public/jobs?country_id%5B%5D=231">{{__('Hair')}}</a> </li>
            @endforeach

            <li class="{{ request()->is('/') ? 'active' : '' }}"><a id="newmenu" href="{{url('/')}}">{{__('Hands')}}</a> </li>
            <li class="{{ request()->is('/') ? 'active' : '' }}"><a id="newmenu" href="{{url('/')}}">{{__('Spa Services')}}</a> </li>

          </ul>

          <!-- Nav collapes end -->

        </div>
        <div class="clearfix"></div>
      </div>

      <!-- Nav end -->

    </div>
  </div>

  <!-- row end -->
</div>

【讨论】：

它不工作，兄弟，我可以给你发送 ftp 访问权限，你可以自己尝试吗？

【解决方案2】：

我通常会像上面的评论那样设置一个变量，并通过 Laravel 中的中间件处理这个 - https://laravel.com/docs/5.7/middleware。

我使用 artisan 创建了一个中间件，并确保路由通过它。

php artisan make:middleware ActiveNav

// routes/web.php
Route::group(['middleware' => 'active.nav'], function () {
    Route::get('/', 'HomeController@index');
    Route::get('/contact', 'ContactController@index');
    Route::get('/blog', 'BlogController@index');
});

在 kernel.php 中注册中间件（注意数组的最后一行）

// app/Http/Kernel.php
protected $routeMiddleware = [
    'auth' => \App\Http\Middleware\Authenticate::class,
    'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
    'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
    'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
    'can' => \Illuminate\Auth\Middleware\Authorize::class,
    'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
    'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
    'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
    'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
    'active.nav' => \App\Http\Middleware\SetActiveNav::class,
];

然后我检查中间件中的路由并设置一个与视图共享的变量

// app/Http/Middleware/ActiveNav.php
public function handle($request, Closure $next)
{
    $active['home']     = '';
    $active['contact']  = '';
    $active['blog']     = '';

    $route = $request->getPathInfo();

    switch(true) {
        case(strstr($route, '/blog')) :
            $active['blog'] = 'active';
            break;
        case(strstr($route, '/contact')) :
            $active['contact'] = 'active';
            break;
        default:
            $active['home'] = 'active';
    }

    \View::share('active', $active );

    return $next($request);
}

}

然后我检查导航：

// nav.blade.php
<li class="nav-item ">
    <a class="nav-link {{$active['home']}} btn" href="/">Home</a>
</li>
<li class="nav-item">
    <a class="nav-link {{$active['blog']}}" href="/blog">Blog</a>
</li>
<li class="nav-item">
    <a class="nav-link {{$active['contact']}}" href="/contact">Contact</a>
</li>

当您需要在一个路由（或一组路由）上运行某个功能时，您可以使用中间件。这种方式也不需要 JS :)

【讨论】：

【解决方案3】：

您可以在helper 文件中简单地创建一个自定义帮助方法：

if(!function_exists('is_active_menu')){

    function is_active_menu($url){

        return \Route::is($url) ? 'active' : '';
    }

}

然后使用：

<li class="list-item {{ is_active_menu('home') }} ">Men</li>

您可以在is() 函数中使用诸如home* 之类的通配符。

【讨论】：

它不工作兄弟或者我不知道怎么做，有没有机会我可以给你发送 ftp 访问，你可以自己试试？ ——

【解决方案4】：

你可以使用请求函数的is方法 is 方法允许您验证传入请求路径是否与给定模式匹配。例如：

如果您的网址是 www.yourdomain.com

<li class="{{request()->is('/') ? 'active' : ''}}"></li>

如果你的网址是 www.yourdoamin.com/page1

<li class="{{request()->is('page1') ? 'active' : ''}}"></li>

如果你的网址是 www.yourdoamin.com/page1/category1

<li class="{{request()->is('page1/category1') ? 'active' : ''}}"></li>

您可以使用 * 字符作为通配符。

www.yourdomain.com/page1/category1

<li class="{{request()->is('page1/*') ? 'active' : ''}}"></li>

www.yourdomain.com/page1/category1/subcategory1

<li class="{{request()->is('page1/*') ? 'active' : ''}}"></li>

文档https://laravel.com/docs/5.8/requests

【讨论】：