我有两个不同的页面,都有一个共同的侧边栏菜单。当我单击菜单时,它将重定向到另一个页面,并且应该在父菜单中添加一个类。即使刷新页面也是如此。
Check this code
这是我的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
}
});
});
答案 0 :(得分:1)
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代码,因此我将本地存储用于此解决方案。您可以通过多种方式解决此问题。