javascript - 在第一页打开时捕获引导选项卡事件

Question

我有以下JS代码：

const showContentBtns = document.getElementsByClassName('show-content-btn');

for (let i = 0; i < showContentBtns.length; i++) {
    showContentBtns[i].addEventListener('show.bs.tab', function (event) {
        console.log("I'm in show!");
    });

    showContentBtns[i].addEventListener('show.bs.tab', function (event) {
        console.log("I'm in shown!");
    });
}

和以下 HTML：

<ul class="nav nav-pills" role="tablist">
    <li class="nav-item ms-1" role="presentation">
        <button class="btn btn-outline-light show-content-btn active"
                data-bs-toggle="pill"
                data-bs-target="#one"
                type="button">
            Required Only
        </button>
    </li>
    <li class="nav-item ms-1" role="presentation">
        <button class="btn btn-outline-light show-content-btn"
                data-bs-toggle="pill"
                data-bs-target="#two"
                type="button">
            Semi
        </button>
    </li>
    <li class="nav-item ms-1" role="presentation">
        <button class="btn btn-outline-light show-content-btn"
                data-bs-toggle="pill"
                data-bs-target="#three"
                type="button">
            Full
        </button>
    </li>
</ul>

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="one" role="tabpanel">
        One
    </div>
    <div class="tab-pane fade" id="two" role="tabpanel">
        Two
    </div>
    <div class="tab-pane fade" id="one" role="tabpanel">
        Three
    </div>
</div>

问题 -加载页面时我无法捕获show和/或事件。shown当我更改标签时 - 事件按预期工作。

手动触发这些事件 ( $(selector).trigger('show.bs.tab')) 不起作用（至少它没有任何积极影响）。这很好，因为它看起来真的很丑:)

另外，我想避免使用这样的代码：

$('button[data-bs-toggle="pill"]').on('click', function () {
    $(this).tab('show');
});

$('button[data-bs-toggle="pill"]:first').tab('show');

我想这里的问题是因为引导程序在我添加这些侦听器之前触发了这些事件。

任何人有任何想法，pleeeease？）

标签： javascripttwitter-bootstrap