單擊標題項時，如何在 Laravel 中為其添加活動類？

Question

我一直試圖在我的標題項被點擊時獲得活躍的類。 我有一個菜單，菜單中的 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');
    });

誰能幫幫我，我卡住了，我不知道該怎么辦，我嘗試了這里的示例，但似乎沒有任何效果，祝您好運！

Answer 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>

Answer 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 :)

Answer 3

您可以簡單地在幫助文件中創建自定義幫助方法：

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*等通配符。

Answer 4

您可以使用是請求函數的方法的方法是讓你驗證傳入請求路徑匹配給定模式。 例如：

• 如果您的網址是 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