admin管理员组

文章数量:1023025

I want to programmable switch tabs (using bootstrap 5). Bootsrap docs say:

As a best practice, we remend using elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.

So I want use buttons instead links. Code:

$("#mybut").click(function() {
  var sel = document.querySelector('#nav-tab-manager')
  bootstrap.Tab.getInstance(sel).show()
})
<script src="/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src=".3.1/jquery.min.js"></script>
<nav>

<div class="nav nav-tabs" id="nav-tab" role="tablist">
  <button class="nav-link active" id="nav-tabs-order" data-bs-toggle="tab" data-bs-target="#tabs-1" type="button" role="tab" aria-controls="tabs-1" aria-selected="true">Orders
  </button>
  <button class="nav-link" id="nav-tab-manager" data-bs-toggle="tab" data-bs-target="#tabs-2" type="button" role="tab" aria-controls="tabs-2" aria-selected="false">Managers
  </button>
  </div>
</nav>


<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="tabs-1" role="tabpanel" aria-labelledby="tabs-tab1">
    Orders
  </div>
  <div class="tab-pane fade" id="tabs-2" role="tabpanel" aria-labelledby="tabs-2">
    Managers
  </div>
</div>

<button type="button" class="btn btn-primary" id="mybut">Want switch to manager</button>

I want to programmable switch tabs (using bootstrap 5). Bootsrap docs say:

As a best practice, we remend using elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.

So I want use buttons instead links. Code:

$("#mybut").click(function() {
  var sel = document.querySelector('#nav-tab-manager')
  bootstrap.Tab.getInstance(sel).show()
})
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>

<div class="nav nav-tabs" id="nav-tab" role="tablist">
  <button class="nav-link active" id="nav-tabs-order" data-bs-toggle="tab" data-bs-target="#tabs-1" type="button" role="tab" aria-controls="tabs-1" aria-selected="true">Orders
  </button>
  <button class="nav-link" id="nav-tab-manager" data-bs-toggle="tab" data-bs-target="#tabs-2" type="button" role="tab" aria-controls="tabs-2" aria-selected="false">Managers
  </button>
  </div>
</nav>


<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="tabs-1" role="tabpanel" aria-labelledby="tabs-tab1">
    Orders
  </div>
  <div class="tab-pane fade" id="tabs-2" role="tabpanel" aria-labelledby="tabs-2">
    Managers
  </div>
</div>

<button type="button" class="btn btn-primary" id="mybut">Want switch to manager</button>

Problem is wrong selector. But I have no idea why.

  • javascript
  • twitter-bootstrap
  • button
  • tabs
  • bootstrap-5
Share Improve this question edited Aug 6, 2021 at 13:03 Carol Skelly 363k92 gold badges737 silver badges647 bronze badges asked Aug 6, 2021 at 12:05 swasherswasher 3915 silver badges19 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 6

You'll want to use getOrCreateInstance instead because the Tabs aren't being first initialized via JS.

$("#mybut").click(function() {
  var sel = document.querySelector('#nav-tab-manager')
  bootstrap.Tab.getOrCreateInstance(sel).show()
})

https://codeply./p/kjHOlPJFnN

I want to programmable switch tabs (using bootstrap 5). Bootsrap docs say:

As a best practice, we remend using elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.

So I want use buttons instead links. Code:

$("#mybut").click(function() {
  var sel = document.querySelector('#nav-tab-manager')
  bootstrap.Tab.getInstance(sel).show()
})
<script src="/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src=".3.1/jquery.min.js"></script>
<nav>

<div class="nav nav-tabs" id="nav-tab" role="tablist">
  <button class="nav-link active" id="nav-tabs-order" data-bs-toggle="tab" data-bs-target="#tabs-1" type="button" role="tab" aria-controls="tabs-1" aria-selected="true">Orders
  </button>
  <button class="nav-link" id="nav-tab-manager" data-bs-toggle="tab" data-bs-target="#tabs-2" type="button" role="tab" aria-controls="tabs-2" aria-selected="false">Managers
  </button>
  </div>
</nav>


<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="tabs-1" role="tabpanel" aria-labelledby="tabs-tab1">
    Orders
  </div>
  <div class="tab-pane fade" id="tabs-2" role="tabpanel" aria-labelledby="tabs-2">
    Managers
  </div>
</div>

<button type="button" class="btn btn-primary" id="mybut">Want switch to manager</button>

I want to programmable switch tabs (using bootstrap 5). Bootsrap docs say:

As a best practice, we remend using elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.

So I want use buttons instead links. Code:

$("#mybut").click(function() {
  var sel = document.querySelector('#nav-tab-manager')
  bootstrap.Tab.getInstance(sel).show()
})
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>

<div class="nav nav-tabs" id="nav-tab" role="tablist">
  <button class="nav-link active" id="nav-tabs-order" data-bs-toggle="tab" data-bs-target="#tabs-1" type="button" role="tab" aria-controls="tabs-1" aria-selected="true">Orders
  </button>
  <button class="nav-link" id="nav-tab-manager" data-bs-toggle="tab" data-bs-target="#tabs-2" type="button" role="tab" aria-controls="tabs-2" aria-selected="false">Managers
  </button>
  </div>
</nav>


<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="tabs-1" role="tabpanel" aria-labelledby="tabs-tab1">
    Orders
  </div>
  <div class="tab-pane fade" id="tabs-2" role="tabpanel" aria-labelledby="tabs-2">
    Managers
  </div>
</div>

<button type="button" class="btn btn-primary" id="mybut">Want switch to manager</button>

Problem is wrong selector. But I have no idea why.

  • javascript
  • twitter-bootstrap
  • button
  • tabs
  • bootstrap-5
Share Improve this question edited Aug 6, 2021 at 13:03 Carol Skelly 363k92 gold badges737 silver badges647 bronze badges asked Aug 6, 2021 at 12:05 swasherswasher 3915 silver badges19 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 6

You'll want to use getOrCreateInstance instead because the Tabs aren't being first initialized via JS.

$("#mybut").click(function() {
  var sel = document.querySelector('#nav-tab-manager')
  bootstrap.Tab.getOrCreateInstance(sel).show()
})

https://codeply./p/kjHOlPJFnN

本文标签： javascriptHow switch Bootstrap 5 tabs (button version) with javasciptStack Overflow

版权声明：本文标题：javascript - How switch Bootstrap 5 tabs (button version) with javascipt - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745577985a2157136.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。