Laravelでブートストラップを使用して現在のページをハイライトする方法5.2

Question

Laravel 5.2を使用する。 bootstarpとの現在のページリンクを強調表示する必要があります。これは私のメニューブレードファイルです

<div class="collapse navbar-collapse" id="app-navbar-collapse"> 
       <!-- Left Side Of Navbar --> 
       <ul class="nav navbar-nav"> 
        <li ><a href="{{ url('/home') }}">Home</a></li> //menu 

        <li ><a href="{{ url('/help') }}">Help</a></li> //menu 

       </ul> 

       <!-- Right Side Of Navbar --> 
       <ul class="nav navbar-nav navbar-right"> 
        <!-- Authentication Links --> 
        @if (Auth::guest()) 
         <li><a href="{{ url('/login') }}">Login</a></li> 
         <li><a href="{{ url('/register') }}">Register</a></li> 
        @else 
         <li class="dropdown"> 

          <li> <a href="{{ route('projects.index') }}">Projects</a> </li> //menu 



          <li> <a href="{{ route('collaborators.index') }}">Collaborators</a> </li> //menu 

私は何ができますか？

{{--*/ $nav = 'user' /*--}} 

そして、あなたのレイアウトでは、この変数を確認します：

<li class="@if ($nav == 'user') active @endif"> 

そしてもちろんのは、のCSS宣言を追加し、私はあなたがこのようなあなたのビューファイルで変数を設定することができ、単純な1

Answer 1

を必要としています。アクティブ。

Answer 2

コントローラから、変数$pageを渡します。コントローラメソッドは、その後、 'ホーム' ページのためにあるのであれば：

function about(){ 
    $page = 'home'; 
    //rest of your code 
} 

とあなたのビューで：

<li ><a href="{{ url('/home') }}" class="@if ($page == 'home') active @endif">Home</a></li> 

とあなたのCSSの：

a.active: { 
color: red; 
} 

Answer 3

あなたはCSSクラスを定義することができますこのような現在のURLにクラスを適用すると、

<li class="{{ Request::is('home') ? 'active' : '' }}"> 

更新：

あなたはこれがあなたのために働く、単一ページのアプリケーションを使用していると、

$("ul li").click(function() { 
    $('li').removeClass("active"); 
    $(this).addClass("active"); 
}); 

Answer 4

が得たこのよう

// It adds an active class when the url matches "users*" 
// The * means that it doesn't matter what comes after it 
<li class="{{ Request::is('users*') ? 'active' : '' }}"> 
    <a href="{{ route('users.index') }}">Employees</a> 
</li>