當我在那個頁面上時，保持一個鏈接高亮顯示（或活動）

Question

我試圖做一段時間，但似乎不起作用。

我當前的代碼是： HTML：

<div class="sidebar-middle"> 
     <ul class="sidebar-menu"> 
      <li><a href="{{ URL::to('account/update/'.Auth::user()->id) }}">Info</a></li> 
      <li><a href="{{ URL::to('account/readed-books/'.Auth::user()->id) }}">Istoric carti</a></li> 
      <li><a href="{{ URL::to('account/orders/'.Auth::user()->id) }}">Comenzi</a></li> 
      <li><a href="{{ URL::to('account/wishlist/'.Auth::user()->id) }}">Wishlist</a></li> 
      <li><a href="{{ URL::to('logout') }}">Logout</a></li> 
      <div class="clear"></div> 
     </ul> 
    </div> 

CSS：

.sidebar-middle .sidebar-menu li a 
{ 
    float: left; 
    padding: 10px 13px; 
    color: #fff; 
} 
.sidebar-middle .sidebar-menu li a:active, .active { 
    color: #fff; 
    background-color: #554483; 
    text-decoration: none; 
} 

JS：

<script> 
$(function() { 

    $(".sidebar-menu li a").click(function() { 
     $(this).toggleClass("active"); 
    }); 

}); 

它添加的類別，但重定向後點擊頁面，「積極」的班級消失。 請幫忙！

Answer 1

你可以嘗試這樣的事：

$(document).ready(function() { 
 

 
    
 
var myUrl = $(".submenu a").attr("href"); 
 
console.log(myUrl); 
 
var pageUrl = window.location.href 
 
console.log(pageUrl); 
 
if(myUrl === pageUrl) { 
 
     $(".submenu a[href$='" + pageUrl + "']").css("background", "yellow"); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="sidebar-middle"> 
 
     <ul class="submenu"> 
 
      <li><a href="http://stacksnippets.net/js">Info</a></li> 
 
      <li><a href="{{ URL::to('account/readed-books/'.Auth::user()->id) }}">Istoric carti</a></li> 
 
      <li><a href="{{ URL::to('account/orders/'.Auth::user()->id) }}">Comenzi</a></li> 
 
      <li><a href="{{ URL::to('account/wishlist/'.Auth::user()->id) }}">Wishlist</a></li> 
 
      <li><a href="{{ URL::to('logout') }}">Logout</a></li> 
 
      <div class="clear"></div> 
 
     </ul> 
 
    </div>