我有一个Web应用程序布局,该布局根据用户在其个人资料上配置的语言加载不同的菜单项,如果用户未登录,他们还将获得不同的链接。项目列表返回到每个视图。
当我尝试将其与javascript结合使用以使当前访问的链接处于活动状态时,会发生问题。
每次加载布局时,菜单都会被以下代码覆盖
@foreach (var item in ViewBag.LoggedIn)
{
<li><a href="@item.Url">@item.Text</a></li>
}
我试图使用以下代码使链接处于活动状态。
$('li > a').click(function () {
$('li').removeClass();
$(this).parent().addClass('active');
});
所有帮助将不胜感激。
答案 0 :(得分:1)
我建议您尝试根据当前URL渲染菜单,并在渲染时设置活动菜单:
string url = HttpContext.Current.Request.Url.AbsoluteUri;
// http://localhost:1302/TESTERS/Default6.aspx You can conviniently get a substring of this
@foreach (var item in ViewBag.LoggedIn)
{
@if (item.Url == url)
{
<li class="active"><a href="@item.Url">@item.Text</a></li>
}
else
{
<li><a href="@item.Url">@item.Text</a></li>
}
}
答案 1 :(得分:0)
您需要删除active
类(如果存在于任何li
上),然后将active
添加到被单击的类中。
$('li > a').click(function (e) {
e.preventDefault();
$('li').removeClass('active')
$(this).parent().addClass('active')
})
.active {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="root">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</div>