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");
    });

});

它添加了类，但在重定向到单击页面后，类“active”消失。请帮忙！

Answer 1

您可以尝试这样的事情：

＆＃13;

$(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");
    }

});

＆＃13;

<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>

＆＃13;

当我在该页面上时，保持链接突出显示（或激活）

1 个答案: