[英]Javascript needed to keep active page link highlighted - html5 & css
[英]Keep a link highlighted (or active) when i am on that page
我嘗試了一段時間,但是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");
});
});
它添加了類,但是在重定向到單擊的頁面后,該類“活動”消失了。 請幫忙!
您可以嘗試這樣的事情:
$(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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.