具有动态菜单的布局

时间:2019-02-20 19:00:06

标签: javascript asp.net-core

我有一个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');
 });

所有帮助将不胜感激。

2 个答案:

答案 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>