Активное навигационное меню не работает.?

---

Привет,

Я создал меню с помощью элемента ul li, но при щелчке по какому пункту меню этот пункт должен быть красного цвета.
он работает без тега "а". но с тегом на странице редиректа его цвет не отображается .

как это сделать с тегом? Пожалуйста, помогите мне.

Что я уже пробовал:

<ul class="nav">
     <li class="LogoStyle">
         <a href=@Url.Action("Index", "Home")>
            <p>Analog Dashboard</p>
         </a>
     </li>
	<li>
         <a href=@Url.Action("Index", "Home")>
            <p>Digital Dashboard</p>
         </a>
     </li>
     <li>
         <a href=@Url.Action("Index", "Home")>
            <p>Report</p>
         </a>
     </li>
     <li>
         <a href=@Url.Action("Index", "Home")>
            <p>Signal</p>
         </a>
     </li>
</ul>

$(document).ready(function () {
        var selector = '.nav li';
        $(selector).on('click', function () {
            $(selector).removeClass('LogoStyle');
            $(this).addClass('LogoStyle');
        });
    });

.LogoStyle {
    color: red;
    font-weight: 500;
}

---