我一直在尝试单击标题项时的活动类。我有一个菜单，菜单中的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');
});
有人可以帮我吗，我被困住了，我不知道该怎么办，我从这里尝试了一些例子，但似乎没有任何效果，祝你好运！
答案 0 :(得分：0)
尝试以下操作，该操作来自链接的线程和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>
答案 1 :(得分：0)
我通常会像上面的注释一样设置一个变量，并通过Laravel的中间件-https://laravel.com/docs/5.7/middleware处理该问题。
我使用工匠创建了一个中间件，并确保路由通过它。
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,
];
然后我在中间件中检查路由并设置一个与Views共享的变量
// 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：）
答案 2 :(得分：0)
您可以简单地在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>
您可以在home*函数中使用诸如is()之类的通配符。
答案 3 :(得分：0)
您可以使用请求函数的 is 方法 是方法允许您验证传入的请求路径是否与给定的模式匹配。 例如：
<li class="{{request()->is('/') ? 'active' : ''}}"></li>
<li class="{{request()->is('page1') ? 'active' : ''}}"></li>
<li class="{{request()->is('page1/category1') ? 'active' : ''}}"></li>
您可以将*字符用作通配符。
www.yourdomain.com/page1/category1
<li class="{{request()->is('page1/*') ? 'active' : ''}}"></li>
<li class="{{request()->is('page1/*') ? 'active' : ''}}"></li>