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

问题描述 投票:0回答:1

[嗨,我现在创建一个站点并使用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>
javascript html bootstrap-4
1个回答
1
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.