使用jQuery更改Bootstrap5活動選項卡

當從另一個選項卡內單擊按鈕時，我正在嘗試更改活動選項卡。我發現的所有示例都是帶有錨標簽的標簽，沒有帶有按鈕的標簽。我是否能夠在不從按鈕更改為錨標簽的情況下實作這一目標？我試圖應用我看到的錨標簽代碼，但沒有成功。當我點擊查看更多時，我喜歡切換到推薦標簽

<ul class="nav nav-tabs innerTab" id="allTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="all-tab" data-bs-toggle="tab" data-bs-target="#all" type="button" role="tab" aria-controls="all" aria-selected="true">All</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="referral-tab" data-bs-toggle="tab" data-bs-target="#referral" type="button" role="tab" aria-controls="referral" aria-selected="false">Ref</button>
  </li>

  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profit-tab" data-bs-toggle="tab" data-bs-target="#profit" type="button" role="tab" aria-controls="profit" aria-selected="false">Pro</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="merchandise-tab" data-bs-toggle="tab" data-bs-target="#merchandise" type="button" role="tab" aria-controls="merchandise" aria-selected="false">Merch</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="withdrawal-tab" data-bs-toggle="tab" data-bs-target="#withdrawal" type="button" role="tab" aria-controls="withdrawal" aria-selected="false">History</button>
  </li>
</ul>
<div class="tab-content" id="walletContent">
  <div class="tab-pane show active" id="all" role="tabpanel" aria-labelledby="all-tab">
    <div class="row goal-meter mb-4 g-4">
      <div class="col">
        <div class="card card-transparent">
          <div>
            <a class="v-link-green d-inline-block float-end mt-3 me-3 view-more">View
                                                            more</a>
          </div>
          <div class="card-body p-0 d-flex align-items-center">
            <div class="progress prog-green" data-value='46'>
              <span class="progress-left">
                                                                <span class="progress-bar"></span>
              </span>
              <span class="progress-right">
                                                                <span class="progress-bar"></span>
              </span>
              <div class="progress-value">46%</div>
            </div>
            <div class="progress-title">Referral
              <p class="highlight-green fig">$120,000.00</p>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="tab-pane" id="referral" role="tabpanel" aria-labelledby="referral-tab">
    Ref
  </div>
  <div class="tab-pane" id="profit" role="tabpanel" aria-labelledby="profit-tab">
    Profit
  </div>
  <div class="tab-pane" id="merchandise" role="tabpanel" aria-labelledby="merchandise-tab">
    Merch
  </div>
  <div class="tab-pane" id="withdrawal" role="tabpanel" aria-labelledby="withdrawal-tab">
    With
  </div>
</div>

uj5u.com熱心網友回復：

添加對 id 為“referral-tab”的按鈕的參考，當單擊查看更多鏈接時，使用 bootrap 的 api 顯示它。

1. 定義代碼以顯示特定選項卡：

var triggerEl = document.getElementById('referral-tab')
var tabTrigger = new bootstrap.Tab(triggerEl)
  
function activateReferralsTab() {
  bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
}

2. 將activateReferralsTab()函式附加到查看更多鏈接onclick處理程式：

<a
  class="v-link-green d-inline-block float-end mt-3 me-3 view-more"
  onclick="activateReferralsTab()">
  View more
</a>

下面是一個運行示例。

顯示代碼片段

var triggerEl = document.getElementById('referral-tab')
var tabTrigger = new bootstrap.Tab(triggerEl)
  
function activateReferralsTab() {
  bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<ul class="nav nav-tabs innerTab" id="allTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="all-tab" data-bs-toggle="tab" data-bs-target="#all" type="button" role="tab" aria-controls="all" aria-selected="true">All</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="referral-tab" data-bs-toggle="tab" data-bs-target="#referral" type="button" role="tab" aria-controls="referral" aria-selected="false">Ref</button>
  </li>

  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profit-tab" data-bs-toggle="tab" data-bs-target="#profit" type="button" role="tab" aria-controls="profit" aria-selected="false">Pro</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="merchandise-tab" data-bs-toggle="tab" data-bs-target="#merchandise" type="button" role="tab" aria-controls="merchandise" aria-selected="false">Merch</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="withdrawal-tab" data-bs-toggle="tab" data-bs-target="#withdrawal" type="button" role="tab" aria-controls="withdrawal" aria-selected="false">History</button>
  </li>
</ul>
<div class="tab-content" id="walletContent">
  <div class="tab-pane show active" id="all" role="tabpanel" aria-labelledby="all-tab">
    <div class="row goal-meter mb-4 g-4">
      <div class="col">
        <div class="card card-transparent">
          <div>
            <a class="v-link-green d-inline-block float-end mt-3 me-3 view-more" onclick="activateReferralsTab()">View more</a>
          </div>
          <div class="card-body p-0 d-flex align-items-center">
            <div class="progress prog-green" data-value='46'>
              <span class="progress-left">
                                                            <span class="progress-bar"></span>
              </span>
              <span class="progress-right">
                                                            <span class="progress-bar"></span>
              </span>
              <div class="progress-value">46%</div>
            </div>
            <div class="progress-title">Referral
              <p class="highlight-green fig">$120,000.00</p>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="tab-pane" id="referral" role="tabpanel" aria-labelledby="referral-tab">
    Ref
  </div>
  <div class="tab-pane" id="profit" role="tabpanel" aria-labelledby="profit-tab">
    Profit
  </div>
  <div class="tab-pane" id="merchandise" role="tabpanel" aria-labelledby="merchandise-tab">
    Merch
  </div>
  <div class="tab-pane" id="withdrawal" role="tabpanel" aria-labelledby="withdrawal-tab">
    With
  </div>
</div>`enter code here`

標籤：jQuery 按钮 标签 引导程序 5

上一篇：Androidstudio按鈕固定顏色無法更改

下一篇：HTML電子郵件按鈕