Я студент и совершенно новый для ASP.NET MVC, и я пришел из веб-формы ASP.NET. (Используется для него)
У меня есть список:
<ul class="sidebar bg-grayDark">
<li class="active">
<a href="@Url.Action("Index", "Home")">
<span class="mif-home icon"></span>
<span class="title">Home</span>
</a>
</li>
<li class="bg-hover-black">
<a href="@Url.Action("Index", "Product")">
<span class="mif-shop icon"></span>
<span class="title">Products</span>
<span class="counter">14</span>
</a>
</li>
<li class="bg-hover-black">
<a href="@Url.Action("Index", "Category")">
<span class="mif-flow-cascade icon"></span>
<span class="title">Categories</span>
<span class="counter">9</span>
</a>
</li>
<li class="bg-hover-black">
<a href="@Url.Action("Index", "User")">
<span class="mif-users icon"></span>
<span class="title">Users</span>
<span class="counter">1</span>
</a>
</li>
</ul>
Моя цель: По какому виду визуализируется, я хочу добавить "активный" к тому, на который был нажат. Пример: я нажимаю "Категория", затем "Домой" теряет активный класс, а "Категория" добавляет в свой класс. (и наоборот с "bg-hover-black" )
Я думал, что смогу сделать это, проверив визуализацию, но я не знаю, как это сделать. (Я не знаю, как проверить фактический визуализированный вид, но использование Razor для проверки условий в порядке)
Я сначала попытался с JavaScript:
$(function () {
$('.sidebar').on('click', 'li', function () {
if (!$(this).hasClass('active')) {
$('.sidebar li').removeClass('active');
$(this).addClass('active');
}
})
})
Но это не работает, потому что когда страница загружается, html повторно отображается с помощью "active" для части Home. (Если я удалю "активный" для дома, то ничего не будет активно onClick, кроме как между загрузкой клика и страницы).
У вас есть решение? Я много искал в Интернете, но ничего не нашел, чтобы помочь мне.
Извините за любые английские ошибки, я все еще изучаю это:).
Спасибо,
Hellcat8.