javascript - 单击标题项时如何在 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>