当我在该页面上时，保持链接突出显示（或处于活动状态）

Question

我尝试了一段时间，但是nothig似乎可以工作。

我当前的代码是：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>