Select 只有一个随机导航项和显示内容 (bootstrap)

Question

我正在尝试让 JS 进入 select 一个随机导航项目，然后显示它的内容。到目前为止，我只能让 JS 到 select 所有导航项（或不是 - 随机化）。代码太大，只贴一部分

JS

$(document).ready(function(){
  var i = Math.floor(Math.random() * 3) + 1
  if(i == 1)
  $('.taby .nav-item').addClass("active");
});

HTML

*nav-link 应该具有“活动”（所以它看起来像“导航项目活动”（我用 js 实现了这一点，但对于所有导航项目......）

<div id="tabs">
<div class="taby">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Annegret Schallman</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Nadine Schröter</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Britta Szidzik</a>
  </li>
</ul>
</div>

还与导航项一起（每个导航项都连接到特定 div）选项卡窗格应更改为“选项卡窗格淡入淡出”

<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">

有什么帮助吗？

这是实时预览网站：https://www.uni-goettingen.de/de/vorschau_c4985eafb982d71cc99d41d205306731/658371.html

Answer 1

生成随机数后，使用jquery的.eq()方法 select 相应的随机选项卡。
使用 .tab('show') 显示随机 select 选项卡。

试试这个

$(document).ready(function(){
    let tabs = $('.taby .nav-link');
    var i = Math.floor(Math.random() * tabs.length);
    tabs.eq(i).tab('show');
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

<div class="taby">
    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="false">Annegret Schallman</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Nadine Schröter</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Britta Szidzik</a>
        </li>
    </ul>
</div>
<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">Annegret Schallman</div>
    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">Nadine Schröter</div>
    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">Britta Szidzik</div>
</div>

Select 只有一个随机导航项和显示内容 (bootstrap)

Select only one random nav-item and show content (bootstrap)

javascript

jquery

tabs

bootstrap-4