单击后，如何选择给定类的所有未选择的给定元素？

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 on click

Answer 1

看看 HTML/JS 最好的地方，没有一种最好的方法。当然肯定有更糟糕的方法。但更好或最好真的取决于我们想要达到的目标。

根据我作为 Web 开发人员的经验，并查看了各种 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>