Блог

У меня есть несколько экземпляров в pills, и я пытаюсь добавить класс к тому, на который был нажат, и только к этому.

Вот пример:

Экземпляр один

 <ul class="nav nav-pills">
  <li><a data-toggle="tab" href="#contentone" class="active" onclick="toggleActive($event)">One</a></li>
  <li><a data-toggle="tab" href="#contenttwo" onclick="toggleActive($event)">Two</a></li>
</ul>
  

Второй экземпляр

 <ul class="nav nav-pills">
  <li><a data-toggle="tab" href="#contentone" class="active" onclick="toggleActive($event)">One</a></li>
  <li><a data-toggle="tab" href="#contenttwo" onclick="toggleActive($event)">Two</a></li>
</ul>
  

У меня есть эта функция:

 toggleActive(this) {
    $(this).addClass('active');
}
  

По сути, происходит то, что то, что я нажимаю на экземпляр второго (например), изменяет таблетку в первом.

Мне это нужно только для того, чтобы повлиять на выбранный элемент, а не на другой.

Как я могу это сделать?

Если вы не определили это где-то на глобальном уровне, $event будет undefined . Даже если вы определили его, оно не будет содержать никакой полезной информации о событии, вызванном в соответствии с ожиданиями вашего кода, следовательно $(this) , это не то, что вы ожидаете.

Чтобы исправить это и улучшить код, полностью прекратите использовать on* атрибуты события и ненавязчиво прикрепите свои обработчики событий. Поскольку вы уже используете jQuery, вот как вы это делаете:

 $('.nav-pills li a').click(function() {
  $(this).toggleClass('active'); // note toggleClass here, to allow selection/deselection
});  

 .active {
  background-color: #C00;
  color: #FFF;
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-pills">
  <li><a data-toggle="tab" href="#contentone" class="active">One</a></li>
  <li><a data-toggle="tab" href="#contenttwo">Two</a></li>
</ul>

<ul class="nav nav-pills">
  <li><a data-toggle="tab" href="#contentone" class="active">One</a></li>
  <li><a data-toggle="tab" href="#contenttwo">Two</a></li>
</ul>  

Если вы хотите использовать функцию toggleActive()

    $(function () {
        toggleActive = function (e) {
            $("a").removeClass('active')
            $(e).addClass('active');
        };
    });  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-pills">
    <li><a data-toggle="tab" href="#contentone" class="active" onclick="toggleActive(this)">One</a></li>
    <li><a data-toggle="tab" href="#contenttwo" onclick="toggleActive(this)">Two</a></li>
</ul>  

вы можете сначала удалить весь активный класс, а затем добавить активный класс к выбранному элементу