Макет с динамическим меню

Question

У меня есть макет для моего веб-приложения, который загружает различные пункты меню в зависимости от того, какой язык пользователь настроил в своем профиле, и если пользователь не вошел в систему, они также получают разные ссылки.Список элементов возвращается к каждому представлению.

Проблема возникает, когда я пытаюсь объединить это с 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

Вам необходимо удалить класс 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>

Answer 2

Я предлагаю вам попытаться отрендерить меню на основе текущего 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>
   }
 }