javascript - 带有动态菜单的布局

Question

我的 Web 应用程序有一个布局，它根据用户在其个人资料中配置的语言加载不同的菜单项，如果用户未登录，他们还会获得不同的链接。项目列表将返回到每个 View 。

当我尝试将其与 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');
 });

我们将不胜感激所有帮助。

Answer 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>
   }
 }