При нажатии, как выбрать все элементы данного класса, которые не были выбраны?

Question

Скажем, у вас есть список с элементами

<ul class = "tabs">
  <li class = "tab tab1 active">
  <li class = "tab tab2">
  <li class = "tab tab3">
</ul>

Это используется для отображения содержимого в div, где у вас есть

<div class = "tabs">
   <div class = "tab tab1 active">
   <div class = "tab tab2">
   <div class = "tab tab3">
</div>

Я пытаюсь выяснить, как выбратьВкладка в списке ul такова, что для div установлено значение active, а для предыдущих active div и ul их класс active удален.

Есть ли какой-то эквивалент

$(li. has tab in class name).addClass('active' if not already);
$(li. has tab in class name but the ones I didn't select).removeClass('active');
lis = $(li.tab);
$(div.has tab in class name).each(set class same as corresponding li);

Или я должен каким-то образом использовать id для такого рода вещей?

Действительно любопытно! Какой профессиональный способ сделать это?

Спасибо!

Редактировать:

Кажется, что это работает как:

$('li.tab').on('click', function() {
    var ind = $(this).index();
    $(this).addClass('active').siblings().removeClass('active'); 
 $('div.tab').eq(ind).addClass('active').siblings().removeClass('active');
});

Видел этот методздесь: Jquery addclass / removeclass при нажатии

Answer 1

Посмотрите на лучшее в HTML / JS, лучшего способа нет. Конечно, есть и худшие пути. Но лучшее или лучшее действительно зависит от того, чего мы пытаемся достичь.

Согласно моему опыту веб-разработчика и рассмотрению различных плагинов jQuery, есть несколько принципов, которые обычно имеют разработчики. Что-то вроде:

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

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

Первая разметка

<ul class="tabs" data-tabable-target="#my-tabable-data">
    <li class="tab active"><a href="#shopping-tab">Shopping</a></li>
    <li class="tab"><a href="#books-tab">Books</a></li>
    <li class="tab"><a href="#movies-tab">Movies</a></li>
</ul>

<div class="panels" data-tabable="" id="my-tabable-data">
    <div id="shopping-tab">1</div>
    <div id="books-tab">2</div>
    <div id="movies-tab">3</div>
</div>

Причина, по которой я использовал атрибут data-tabable, заключается в том, что я предпочитаю классы для стиля. Вы также можете добавить имена классов tabable, например <div class="panel tabable">, а затем добавить свой код jQuery для достижения своей функциональности, а также для определения стиля с помощью классов.

Затем напишите мой jQuery как:

$('[data-tabable-target]').each(function() {
    target = $(this.data('tabable-target'));
    target.find('div').addClass('hidden');
    this.children('li').click(function() {
        tabToBeActivated = $(this.children('a').get(0).href);
        tabToBeActivated.removeClass('hidden');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

<ul class="tabs" data-tabable-target="#my-other-tabable-data">
    <li class="tab active"><a href="#shopping-tab">Shopping</a></li>
    <li class="tab"><a href="#books-tab">Books</a></li>
    <li class="tab"><a href="#movies-tab">Movies</a></li>
</ul>
<div class="panels" data-tabable="" id="my-other-tabable-data">
    <div id="hobbies-tab">1</div>
    <div id="travels-tab">2</div>
    <div id="random-tab">3</div>
</div>

Действительно, все сводится к тому, как вы это делаете. Просто попробуйте решить проблему под рукой. Если что-то, я не собираюсь использовать один раз на странице, а просто покончить с этим. Я, наверное, напишу то, что вы написали. Если он находится в разработке, и необходимость немедлена, я бы использовал плагин jQuery.

Вы должны проверить https://getbootstrap.com/docs/3.3/javascript/#tabs

Answer 2

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

Минимальный, но рабочий пример:

const tabs = Array.from(document.querySelectorAll('.tabs li'));
const panels = Array.from(document.querySelectorAll('.panels>div'));

for (const [tabIndex, tab] of tabs.entries()) {
  tab.addEventListener('click', () => {
    for (const [panelIndex, panel] of panels.entries()) {
      panel.hidden = tabIndex !== panelIndex;
    }
    for (const xtab of tabs) {
      xtab.classList[xtab===tab ? 'add' : 'remove']('active');
    }
  })
}

.tabs .active {
  background-color: green;
  color: white;
}

.tabs li {
  cursor: pointer;
  background-color: #f2f2f2;
  list-style: none;
  margin-right: 2px;
  flex-grow: 1;
  text-align: center;
}

.tabs { display: flex; margin: 0; padding: 0; justify-content: stretch; }

<ul class="tabs">
  <li class="active">1
  <li>2
  <li>3
</ul>

<div class="panels">
  <div>Panel 1</div>
  <div hidden>Panel 2</div>
  <div hidden>Panel 3</div>
</div>