自动制作引导垂直导航药丸答案

【问题标题】：making bootstrap vertical nav-pills automatical自动制作引导垂直导航药丸
【发布时间】：2019-10-18 11:34:43
【问题描述】：

如何使用 javascript 或 jquery 自动制作 bootstrap 4 个垂直导航药丸？

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </div>
</div>

【问题讨论】：

您能否详细解释一下问题是什么以及目标是什么？
OP 想要to this。如果您 include the proper resources 它应该“正常工作。”这是一个示例 JSFiddle。
我想只使用 JS 或 jQuery 自动制作这些 bootstrap4 选项卡，静态时它可以在官方 bootstrap navs 网站上找到，但我想让下摆自动，我想要这个 [stackoverflow.com/questions/35212808/… 但对于 bootstrap4 不是 3
谢谢@hungerstar，我怎样才能循环自动执行此代码，这意味着在 3 秒或 5 秒后自动转到选项卡 1 和内容 1 自动转到选项卡 2 和内容 2？通过 javascript 或 jquery
啊，你希望它表现得像一个自动图像滑块/画廊。我会在您的帖子中将您的术语更新为类似的内容，因为 “自动” 指的是什么并不明显。

标签： javascript jquery html css bootstrap-4

【解决方案1】：

要自动选择面板，如自动滑块/图片库，您需要假点击每个选项卡（药丸）链接。

基础是：

在标记中添加一些内容，表示这是一个“标签滑块”。在本例中，是一个data- 属性。
循环集合并实例化每个选项卡滑块。对于每个选项卡滑块：
- 获取每个选项卡的引用。
- 计数选项卡 - 用于模运算符 (%1) 和增量变量以确定要显示的面板。
- 创建一个可以重复调用的函数setTimeout，它会通过触发选项卡上的点击事件进入下一个面板。

$( '[data-widget="tab-slider"]' ).each( function ( i, el ) {

  const $container   = $( this );
  const $sliderLinks = $container.find( '.nav-link' );
  const panelCount   = $sliderLinks.length;
  const delay        = 3000; // milleseconds
  let   index        = 0;

  function nextTabSliderPanel() {

    $sliderLinks.eq( index++ % panelCount ).trigger( 'click' );
    setTimeout( nextTabSliderPanel, delay );

  }
  
  nextTabSliderPanel(); // Start the slider.

} );

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="row" data-widget="tab-slider">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">Home Panel</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">Profile Panel</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">Messages Panel</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">Settings Panel</div>
    </div>
  </div>
</div>

【讨论】：