当前位置： 文江博客话题详情

使用 jQuery 更改 Bootstrap 5 活动选项卡

发布于 2025-01-09 04:49:20 字数 3238 浏览 1 评论 0原文

当从另一个选项卡中单击按钮时，我试图更改活动选项卡。我找到的所有示例都是带有锚标记的选项卡，没有带有按钮的选项卡。我可以在不从按钮更改为锚标签的情况下实现这一目标吗？我尝试应用我看到的锚标记代码，但没有成功。当我点击“查看更多”时，我想切换到“推荐”选项卡

<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>
原文

I am trying to change an active tab when a button is clicked from inside another tab. All the examples I have found are tabs with anchor tags, none with buttons. Am I able to achieve this without changing from buttons to anchor tags? I have tried to apply the code I see for the anchor tags but that has not been successful. When I click view more, id like to switch to the referral tab

<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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

感情洁癖 2025-01-16 04:49:20

添加对 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
}
  1. 将 activateReferralsTab() 函数附加到 View more 链接 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`

Add a reference to the button with id "referral-tab" and when the View more link is clicked, use bootrap's api to show it.

  1. Define the code to show the specific tab:
var triggerEl = document.getElementById('referral-tab')
var tabTrigger = new bootstrap.Tab(triggerEl)
  
function activateReferralsTab() {
  bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
}
  1. Attach the activateReferralsTab() function to the View more link onclick handler:
<a
  class="v-link-green d-inline-block float-end mt-3 me-3 view-more"
  onclick="activateReferralsTab()">
  View more
</a>

What follows is a running example.

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`

回复 原文
~没有更多了~

关于作者

迷离°

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

卷耳

文章 0 评论 0

佚名

文章 0 评论 0

℉服软

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

凉宸

文章 0 评论 0

gyhjy

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文