Переключить класс с начальной загрузкой и jQuery

Question

Я после некоторых советов по использованию jquery и начальной загрузки, если кто-то может помочь.

У меня есть следующий HTML

 <ul class="nav nav-pills nav-fill">
    <li class="nav-item">
        <a class="nav-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Our Services</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Our Venues</a>
    </li>
</ul>

У меня тогда есть следующий jquery

 $('ul.nav li a').click(function (e) {
    $('ul.nav li.active').removeClass('active')
    $(this).parent('li').addClass('active')
 })

Теперь то, что я хочу создать, - это активное состояние, когда нажата навигационная ссылка, и она перемещается на любую выбранную вкладку, что не делает, а удаляет активную, если вы выбираете ссылку, чтобы открыть и выберите то же самое, чтобы закрыть?

Может ли кто-нибудь помочь с этим, пожалуйста?

Answer 1

Основная проблема заключается в том, что вы сначала удаляете класс, а затем добавляете класс.Если у вас уже есть класс, а затем добавьте и удалите его, конечно, он все еще будет там.Поэтому, чтобы удалить класс, если он уже существует, вам нужно написать условный оператор, например, так:

    $(document).ready(function(){
   $('ul.nav li a').click(function (e) {
     if($(this).parent('li').hasClass('active')){
       $('ul.nav li.active').removeClass('active')
     }

     else {
       $('ul.nav li.active').removeClass('active')
       $(this).parent('li').addClass('active')
     }
 })
});

или вы можете использовать класс переключения jQuery

Answer 2

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

Answer 3

Если вы хотите добавить и удалить класс с тем же событием click (при первом клике добавить класс, а затем удалить класс), вы можете использовать toggleClass для его достижения:

$('ul.nav li a').click(function (e) {

  // Select the parent li
  var el = $(this).parent();

  // Remove the class to the other li.active elements
  $('ul.nav li.active').not(el).removeClass('active');

  // Toggle the class to the current element: add the class if not present, removes the class if present
  el.toggleClass('active');

});

Подробнее о toggleClass на веб-сайте jQuery.

Надеюсь, это поможет!