Question

嗨，我现在创建一个站点并使用Bootstrap4。我创建了一些标签，并希望此标签在一段时间（3秒）后切换。我怎么做呢？
这是我的标签。

<div class="offers">
                <div class="row">
                    <div class="col-4">
                      <div class="list-group list-group-flush" id="list-tab" role="tablist">
                        <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">tab1</a>
                        <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">tab2</a>
                        <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">tab3</a>
                        <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">tab4</a>
                      </div>
                    </div>
                    <div class="col-8">
                      <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vero autem atque ipsa eligendi! Eos cum labore reprehenderit animi tenetur unde commodi eligendi, hic fuga, explicabo, error corporis. Quia, esse sit!</div>
                        <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa eius deleniti dignissimos, sit voluptatem officia corporis vero tenetur vitae beatae, voluptatibus vel ipsam. Atque, corrupti nam libero quod aspernatur quae!</div>
                        <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis beatae quod, maiores ea sequi quae neque quibusdam? Necessitatibus cum, impedit magni id fuga officiis ullam, natus ab laudantium sapiente cumque.</div>
                        <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error saepe impedit, itaque consectetur reiciendis, veritatis, sunt repellat deleniti reprehenderit quibusdam repudiandae ratione optio veniam doloremque non est amet laboriosam! Tempore?</div>
                      </div>
                    </div>
                  </div>
            </div>

Answer 1

javascript中的概念是删除活动的类并将其添加到下一个选项卡-一些伪代码（一种快速的操作方法）

    var tabisactive = 0;

    var navLinks = document.getElementsByClassName("list-group-item");
    for (var i = 0; i < navLinks.length; i++) {
    navLinks[i].classList.remove("active");
    }
  tabisactive = tabisactive + 1;
  if (tabisactive >= navLinks.length) tabisactive = 0;

将其添加到下一个标签页（我使用var tabisactive存储标签页号）

 navLinks[tabisactive].classList.add("active");

，然后在每x秒调用它的函数上设置一个计时器

自动切换“引导程序”选项卡

1 个答案: