页面重新加载后,在导航栏中保留选定的项目
如何保留选定/活动的导航栏项目,以便在页面重新加载后可以重新选择它?页面重新加载后,在导航栏中保留选定的项目
我正在使用bootstrap,但我认为这不是特别相关。我相信我想要将所选项目存储在点击上,然后在页面上加载重新选择该项目。但我该怎么做?我所看到的大多数都是基于该项目的href参数,但在某些地方我使用ActionLink。
为了使它复杂化,我也有三个导航栏(如果你喜欢,菜单,子菜单和子菜单),所以我想保留每个选择的项目(并设置一个默认项目。选择和菜单项,它会自动选择默认的(第一个)项目在它的子菜单
<nav class="navbar navbar-inverse fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><a href="/Controller1/Index/">Menu Item 1</a>)</li>
<li><a href="/Controller2/Index/">Menu Item 2</a>)</li>
<li><a href="/Controller3/Index/">Menu Item 3</a>)</li>
</ul>
</div>
</nav>
if (IsSectionDefined("SubMenu"))
{
<nav class="navbar navbar-inverse fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav">
@RenderSection("SubMenu")
</ul>
</div>
</nav>
}
if (IsSectionDefined("SubSubMenu"))
{
<nav class="navbar navbar-inverse fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav">
@RenderSection("SubSubMenu")
</ul>
</div>
</nav>
}
<script>
$(document).ready(function (e) {
$(".navbar li a").click(function() {
$(".navbar li a").removeClass("selected");
$(this).addClass("selected");
});
});
</script>
子菜单的一个例子是:
@section SubMenu {
<li><a href="/SubMenu1/">SubMenu Item 1</a>)</li>
<li><a href="/SubMenu2/">SubMenu Item 2</a>)</li>
<li><a href="/SubMenu3/">SubMenu Item 3</a>)</li>
}
@section SubSubMenu {
<li><a href="/SubSubMenu1/">SubSubMenu Item 1</a>)</li>
<li><a href="/SubSubMenu2/">SubSubMenu Item 2</a>)</li>
<li><a href="/SubSubMenu3/">SubSubMenu Item 3</a>)</li>
}
尝试下面的代码和让我知道它是否也不适合你 -
$(document).ready(function() {
$(".navbar li a").click(function() {
var id = $(this).attr("id");
$('#' + id).siblings().find(".active").removeClass("active");
$('#' + id).addClass("active");
localStorage.setItem("selectedolditem", id);
});
var selectedolditem = localStorage.getItem('selectedolditem');
if (selectedolditem != null) {
$('#' + selectedolditem).siblings().find(".active").removeClass("active");
$('#' + selectedolditem).addClass("active");
}
});
是的,如果我为每个“...”块提供一个ID,这个方法就行得通。谢谢。 –
然而,当我在阳光菜单上选择一个项目时,我失去了菜单活动项目。我认为这可以通过每个导航栏拥有一个本地存储来解决。 –
@B_D很高兴听到它为你工作,是的,现在你可以使用子菜单相同。 –
在提出这些问题时,请仅限HTML/CSS。 –
@Praveen你是什么意思? –
@PraveenKumar ..你是什么意思? – AdamJeffers