Добавление/Удаления класса active

396

24 ноября 2016, 09:54

Всем привет! Добивался 30 минут попытки удаления и добавления класса active для ссылок. Вроде код правильный, но у меня не переходит на другие представления по нажатию на ссылки в списке...что делать?

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');   
    })

Почему эти 5 строчек не работают? Эффект есть по нажатию, но я не могу перейти на представления: Index, About and Contact.

Answer 1

e.preventDefault() блокирует переход по ссылке. Вы кликаете по ссылке, js срабатывает по клику, блокирует переход, выполняет действие с классами. Можете попробывать вот это решение, немного "костыль". Но, если вы решили делать через js . . .

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