Hello! Achieved 30 minutes of trying to remove and add an active class for links. It seems the code is correct, but I do not switch to other views by clicking on links in the list ... what to do?

enter image description here enter image description here enter image description here

HTML

<div class="navbar-collapse collapse" id="selectBackground"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("Домашняя страница", "Index", "Home")</li> <li>@Html.ActionLink("О программе", "About", "Home")</li> <li>@Html.ActionLink("Контакт", "Contact", "Home")</li> </ul> </div>

Js

  $("#selectBackground").click(function (e) { e.preventDefault(); $("#selectBackground").removeClass('active'); $(this).addClass('active'); })

Why these 5 lines do not work? The effect is by pressing, but I can not go to the submission: Index, About and Contact.

    1 answer 1

    e.preventDefault () blocks the link. You click on the link, js is triggered by a click, blocks the transition, performs an action with classes. You can try this solution, a bit of a crutch. But, if you decide to do it through js. . .

     $(document).ready(function(){ var pathname = window.location.pathname.slice(1); //Получаем путь, slice(1) убирает первый символ в строке(Если нужно убрать "/") var item = $('nav').find('a[href="'+pathname+'"]'); // находим нашу ссылку $(item).addClass('active'); });

    • Now clicking on links works, but the active class is not hung on any of the three links (clicked on each) - Kryshtop
    • @Kryshtop Explain the essence of your task, what you want to achieve. - E_K
    • @ AFI19 TC wants to make the link that corresponds to the current page, was stylized in a special way. - Igor