Удаление атрибута с помощью jQuery

Question

У меня возникла небольшая проблема с jQuery. У моего навигатора есть ссылки, которые стали синими, когда они выбраны (атрибут «active»), я могу добавлять атрибуты до сих пор, но когда я нажимаю на другую ссылку, я не могу правильно удалить последнюю. Я написал код, я буду благодарен, если кто-нибудь сможет мне помочь.

// JQuery

jQuery('.navbar-nav').on('click', ' li > a.ajaxify', function (e) { 
     e.preventDefault(); 
     App.scrollTop(); 

     var url = $(this).attr("href"); 
     var menuContainer = jQuery('.navbar-nav'); 
     var pageContent = $('.page-content'); 
     var pageContentBody = $('.page-content .page-content-body'); 

     menuContainer.children('li.active').removeClass('active'); 
     menuContainer.children('arrow.open').removeClass('open'); 
     menuContainer.children('arrow.open').removeClass('open'); 

     $(this).parents('li').each(function() { 
      $(this).addClass('active'); 
      $(this).children('a > span.arrow').addClass('open'); 
     }); 
     $(this).parents('li').addClass('active'); 

     App.blockUI(pageContent, false); 

     ... 
    }); 

// HTML

<li class="active"> 
    <a href="" class="ajaxify" id="startLoadTag"> 
     <i class="fa fa-home"></i> Link 
    </a> 
</li> 
<li class=""> 
    <a href="" class="ajaxify"> 
     <i class="fa fa-puzzle-piece"></i> Link 
    </a> 
</li> 
<li class=""> 
    <a data-toggle="dropdown" data-hover="dropdown" data-close-others="true" class="dropdown-toggle" href=""> 
     <i class="fa fa-quote-right"></i> 
     Evento 
     <i class="fa fa-angle-down"></i> 
    </a> 
    <ul class="dropdown-menu"> 
     <li> 
      <a href="" class="ajaxify"><i class="fa fa-building"></i> Link</a> 
     </li> 
     <li> 
      <a href="" class="ajaxify"><i class="fa fa-lightbulb-o"></i> Link</a> 
     </li> 
     <li> 
      <a href="" class="ajaxify"><i class="fa fa-suitcase"></i> Link</a> 
     </li> 
     <li> 
      <a href="" class="ajaxify"><i class="fa fa-group"></i> Link</a> 
     </li> 
     <li> 
      <a href="" class="ajaxify"><i class="fa fa-comments"></i> Link</a> 
     </li> 
    </ul> 
</li> 

Answer 1

Проблема решена, просто сделал это и все работало нормально. Спасибо всем.

menuContainer.children('li.active').removeClass('active'); 
menuContainer.children('arrow.open').removeClass('open'); 

$('ul').each(function() { 
    $(this).children('li').each(function() { 
     if ($(this).hasClass('active')) { 
      $(this).removeClass('active'); 
     } 
    }); 
}); 

$(this).parents('li').addClass('active'); 

Answer 2

До этой линии

$(this).parents('li').addClass('active');

вам нужно запустить .each Функция для каждого «активного» класса и удаления класса. Может быть что-то вроде этого

$('li').each(function() { 
if($(this).hasClass('active') { 
    $(this).removeClass('active'); 
}); 
}