The switch between tabs works only once

Question

I have a problem with switch tabs. In the next snippet you can switch: vk -> spotify, spotify -> vk and stop. The next vk -> spotify doesn't change tab. Why?

$('#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>

Update

According documentation .tab('show'):

Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown (for example, before the shown.bs.tab event occurs).

But in this case active class hold on previous choose.

In such a functionality I would expect to find a line hiding tabs before showing the one clicked — Laurent S., Aug 15 '20 at 09:10
@AlwaysHelping I saw. But I can't understand why this `active` class hold on. According documentation, it must be hidden. — Viewed, Aug 15 '20 at 09:56
@Viewed You are using an onchange function hence why its hold. Its does not recognises the change once the cycle is complete. If you do the same thing with `a` then the documentation is correct but in that too => *each tab needs to be activated individually* — Always Helping, Aug 15 '20 at 10:01
Read [here](https://getbootstrap.com/docs/3.4/javascript/#tabs-usage) for more clarification => *Enable tabbable tabs via JavaScript (each tab needs to be activated individually)* — Always Helping, Aug 15 '20 at 10:04
@AlwaysHelping do you know how to change default behaviours in order to it's work with `option` tag such as with `a` tag. — Viewed, Aug 15 '20 at 11:44
@Viewed Any specific reason you are obsessing so much about about only using `.tab(show)` and not using `removeClass()` to get the desired results ? — Always Helping, Aug 15 '20 at 11:54
@AlwaysHelping This solution is not obvious. Like a stick in the wheel. Conditionally, in a month I will have to dig again and understand why this deletion is necessary. After all, this is not my decision, but the use of a ready-made library whose behavior is changed by me. — Viewed, Aug 15 '20 at 11:59
@Viewed No worries. Deleting my answer. Since it did not helped and you have your priorities set! — Always Helping, Aug 15 '20 at 12:00

Liu Lei · Answer 1 · 2020-08-15T15:14:44.137

0

u need to remove the unselected option before u show the selected one first time both of them haven't '.active' className so it works.the third time both of them have '.active' className so it doesn't work


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

edited Aug 15 '20 at 15:14

answered Aug 15 '20 at 09:14

Liu Lei

1,256
1
9
18

I'm not familiar with bootstrap, but u need remove the unselected option‘s class name of '.active'. use bootstrap api or simply use `element.className = “ ” ` – Liu Lei Aug 15 '20 at 15:17

The switch between tabs works only once

Update

1 Answers1