【问题标题】：The switch between tabs works only once选项卡之间的切换只工作一次
【发布时间】：2020-08-15 09:00:36
【问题描述】：

我遇到了切换标签的问题。在下一个 sn-p 中，您可以切换：vk -> spotify、spotify -> vk 并停止。下一个 vk -> spotify 不会更改选项卡。为什么？

$('#sourcePlatform').on('change', function (e) {
    var $optionSelected = $('option:selected', this);
    $optionSelected.tab('show');
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<select id="sourcePlatform">
    <option data-target="#vk_platform">Vk</option>
    <option data-target="#spotify_platform">Spotify</option>
</select>

<div class="tab-content">
    <div class="tab-pane active" id="vk_platform">VK</div>
    <div class="tab-pane" id="spotify_platform">Spotify</div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

更新

根据documentation.tab('show')：

选择给定的列表项并显示其关联的窗格。任何其他先前选择的列表项变为未选择，其关联的窗格被隐藏。返回到选项卡窗格之前的调用者已实际显示（例如，在 shown.bs.tab 事件之前发生）。

但在这种情况下，active 类保留先前的选择。

【问题讨论】：

在这样的功能中，我希望在显示点击的标签之前找到一行隐藏标签
@AlwaysHelping 我看到了。但我不明白为什么这个active 课程会坚持下去。根据文档，它必须被隐藏。
@Viewed 您正在使用 onchange 函数，因此它为什么成立。一旦循环完成，它就不会识别更改。如果你对a 做同样的事情，那么文档是正确的，但也是如此 => 每个选项卡都需要单独激活
阅读here 了解更多信息 => 通过 JavaScript 启用可选项卡（每个选项卡需要单独激活）
@AlwaysHelping 你知道如何改变默认行为以使其与option 标记一起工作，例如a 标记。

标签： javascript jquery bootstrap-4 bootstrap-tabs

【解决方案1】：

在显示选定的选项之前，您需要删除未选择的选项第一次他们两个都没有'.active' className 所以它工作。第三次他们两个都有'.active' className 所以它不起作用


$unselected.tab('hidden') // or $unselected.className = ''
$selected.tab('show')

【讨论】：

我不熟悉 bootstrap，但你需要删除未选中选项的类名 '.active'。使用引导 api 或简单地使用 element.className = “ ”