[英]Activate the menu on the left side bar based on url
我有兩個帶有共同側邊欄菜單的不同頁面。 當我單擊菜單時,它將重定向到另一個頁面,並且應該在父菜單中添加一個類。 即使刷新頁面也是如此。
檢查此代碼
這是我的js代碼:
$(document).ready(function () {
$("#sidebar-menu a").each(function () {
var pageUrl = window.location.href.split(/[?#]/)[0];
console.log(pageUrl);
if (this.href == pageUrl) {
$(this).addClass("active");
$(this).parent().addClass("active"); // add active to li of the current link
$(this).parent().parent().prev().addClass("active"); // add active class to an anchor
$(this).parent().parent().parent().parent().prev().click();
$(this).parent().parent().prev().click(); // click the item to make it drop
}
});
});
menuother.html
<link rel="stylesheet" href="http://themepixels.me/slim1.1/css/slim.css">
<style>
</style>
<div class="slim-sidebar">
<label class="sidebar-label">Navigation</label>
<ul class="nav nav-sidebar">
<li class="sidebar-nav-item with-sub">
<a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item"><a href="menu.html" class="nav-sub-link menu" data-number='1' >Page 01</a></li>
<li class="nav-sub-item"><a href="" data-number='2' class="nav-sub-link menu">Page 02</a></li>
<li class="nav-sub-item"><a href="" data-number='3' class="nav-sub-link menu">Page 03</a></li>
<li class="nav-sub-item"><a href="" data-number='4' class="nav-sub-link menu">Page 04</a></li>
<li class="nav-sub-item"><a href="" data-number='5' class="nav-sub-link menu">Page 05</a></li>
</ul>
</li>
<li class="sidebar-nav-item with-sub">
<a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item"><a href="menuother.html" data-number='6' class="nav-sub-link menu">Menu 01</a></li>
<li class="nav-sub-item"><a href="" data-number='7' class="nav-sub-link menu">Menu 02</a></li>
<li class="nav-sub-item"><a href="" data-number='8' class="nav-sub-link menu">Menu 03</a></li>
<li class="nav-sub-item"><a href="" data-number='9' class="nav-sub-link menu">Menu 04</a></li>
<li class="nav-sub-item"><a href="" data-number='10' class="nav-sub-link menu">Menu 05</a></li>
</ul>
</li>
<li class="sidebar-nav-item with-sub">
<a href="" class="sidebar-nav-link"><i class="icon ion-ios-book-outline"></i> Pages</a>
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item sub-with-sub">
<a href="#" class="nav-sub-link">Pricing</a>
<ul>
<li class="sub-sub-link"><a href="" >Pricing 01</a></li>
<li class="sub-sub-link"><a href="">Pricing 02</a></li>
<li class="sub-sub-link"><a href="">Pricing 03</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Hi
<!-- slim-sidebar -->
<script src="http://themepixels.me/slim1.1/lib/jquery/js/jquery.js"></script>
<script src="main.js"></script>
<script type="text/javascript">
$(".menu").click(function(){
localStorage.setItem("menu", this.getAttribute('data-number'));
});
// For default Activation
var data = localStorage.getItem('menu');
if(!data)
localStorage.setItem("menu", 1);
console.log("Default Configuration ");
console.log(data);
// console.log( $('.menu').eq(data).html());
console.log( $('.menu').eq(data-1).css({background: 'red'}));
$('.menu').eq(data-1).parent().parent().prev().css({background: 'red'})
</script>
menu.html
</style>
<div class="slim-sidebar">
<label class="sidebar-label">Navigation</label>
<ul class="nav nav-sidebar">
<li class="sidebar-nav-item with-sub">
<a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item"><a href="menu.html" class="nav-sub-link menu" data-number='1' > Page 01 </a></li>
<li class="nav-sub-item"><a href="" data-number='2' class="nav-sub-link menu">Page 02</a></li>
<li class="nav-sub-item"><a href="" data-number='3' class="nav-sub-link menu">Page 03</a></li>
<li class="nav-sub-item"><a href="" data-number='4' class="nav-sub-link menu">Page 04</a></li>
<li class="nav-sub-item"><a href="" data-number='5' class="nav-sub-link menu">Page 05</a></li>
</ul>
</li>
<li class="sidebar-nav-item with-sub">
<a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item"><a href="menuother.html" data-number='6' class="nav-sub-link menu">Menu 01</a></li>
<li class="nav-sub-item"><a href="" data-number='7' class="nav-sub-link menu">Menu 02</a></li>
<li class="nav-sub-item"><a href="" data-number='8' class="nav-sub-link menu">Menu 03</a></li>
<li class="nav-sub-item"><a href="" data-number='9' class="nav-sub-link menu">Menu 04</a></li>
<li class="nav-sub-item"><a href="" data-number='10' class="nav-sub-link menu">Menu 05</a></li>
</ul>
</li>
<li class="sidebar-nav-item with-sub">
<a href="" class="sidebar-nav-link"><i class="icon ion-ios-book-outline"></i> Pages</a>
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item sub-with-sub">
<a href="#" class="nav-sub-link">Pricing</a>
<ul>
<li class="sub-sub-link"><a href="" >Pricing 01</a></li>
<li class="sub-sub-link"><a href="">Pricing 02</a></li>
<li class="sub-sub-link"><a href="">Pricing 03</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- slim-sidebar -->
<script src="http://themepixels.me/slim1.1/lib/jquery/js/jquery.js"></script>
<script src="main.js"></script>
<script type="text/javascript">
$(".menu").click(function(){
localStorage.setItem("menu", this.getAttribute('data-number'));
});
// For default Activation
var data = localStorage.getItem('menu');
if(!data)
localStorage.setItem("menu", 1);
console.log("Default Configuration ");
console.log(data);
console.log( $('.menu').eq(data-1).css({background: 'red'}));
$('.menu').eq(data-1).parent().parent().prev().css({background: 'red'})
</script>
實際上,您只給我html和js代碼,因此我將本地存儲用於此解決方案。 您可以通過多種方式解決此問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.