僅選擇一個隨機導航項并顯示內容（引導程式）

我試圖讓 JS 選擇一個隨機導航項，然后顯示它的內容。到目前為止，我只能讓 JS 選擇所有導航項（或不隨機）。代碼太大，我只貼一部分。

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

uj5u.com熱心網友回復：

• 生成亂數后，使用jquery的.eq()方法選擇對應的隨機選項卡。
• 用于.tab('show')顯示隨機選擇的選項卡。

試試這個

$(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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

標籤：javascript jQuery 引导程序 4 标签

上一篇：多個幻燈片容器

下一篇：當URL在滾動到某個散列時更改時，將類添加到div