• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

194
Views
Cómo cambiar las pestañas de Bootstrap 5 (versión de botón) con javascipt

Quiero pestañas de cambio programables (usando bootstrap 5). Los documentos de Bootsrap dicen:

Como práctica recomendada, recomendamos usar elementos para las pestañas, ya que estos son controles que activan un cambio dinámico, en lugar de enlaces que navegan a una nueva página o ubicación.

Así que quiero usar botones en lugar de enlaces. Código:

 $("#mybut").click(function() { var sel = document.querySelector('#nav-tab-manager') bootstrap.Tab.getInstance(sel).show() })
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/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>

El problema es un selector incorrecto. Pero no tengo idea de por qué.

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

En su lugar, querrá usar getOrCreateInstance porque las pestañas no se inicializan primero a través de JS.

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

https://codeply.com/p/kjHOlPJFnN

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error