Las pestañas de Twitter Bootstrap no funcionan: cuando hago clic en ellas no pasa nada

Question 1

Estoy tratando de implementar pestañas de Twitter Bootstrap en el siguiente código, pero parece que no funciona. Se muestran las pestañas, pero cuando hago clic en ellas no sucede nada. A continuación se muestra el único código que estoy usando. Todos los demás scripts CSS / JS se copian del marco de Twitter Bootstrap.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="assets/twitterbootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/twitterbootstrap/css/bootstrap-responsive.css" rel="stylesheet">

</head>

<body data-spy="scroll" data-target=".subnav" data-offset="50">

<div class="container">

<!-------->
<div id="content">
    <ul class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red">Red</a></li>
        <li><a href="#orange">Orange</a></li>
        <li><a href="#yellow">Yellow</a></li>
        <li><a href="#green">Green</a></li>
        <li><a href="#blue">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $(".tabs").tabs();
    });
</script>    
</div> <!-- container -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap.js"></script>
</body>
</html>

Question 2

Necesita agregar el complemento de pestañas a su código

<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap-tab.js"></script>

Bueno, no funcionó. Hice algunas pruebas y empezó a funcionar cuando:

movió (actualizado a 1.7) el script jQuery a la <head>sección
agregado data-toggle="tab"a los enlaces y la identificación del <ul>elemento de pestaña
cambiado $(".tabs").tabs();a$("#tabs").tab();
y algunas otras cosas que no deberían importar

Aquí hay un código

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
</head>

<body>

<div class="container">

<!-------->
<div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
        <li><a href="#orange" data-toggle="tab">Orange</a></li>
        <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
        <li><a href="#green" data-toggle="tab">Green</a></li>
        <li><a href="#blue" data-toggle="tab">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>


<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $('#tabs').tab();
    });
</script>    
</div> <!-- container -->


<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>

</body>
</html>

Question 3

Los elementos clave incluyen:

el class="nav nav-tabs"y data-tabs="tabs"deul
el data-toggle="tab"y href="#orange"dela
el class="tab-content"del divdel contenido
el class="tab-pane"y iddel div de los elementos

El código completo es el siguiente:

<ul class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a data-toggle="tab" href="#red">Red</a></li>
    <li><a data-toggle="tab" href="#orange">Orange</a></li>
    <li><a data-toggle="tab" href="#yellow">Yellow</a></li>
    <li><a data-toggle="tab" href="#green">Green</a></li>
    <li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="red">
        <h1>Red</h1>
        <p>red red red red red red</p>
    </div>
    <div class="tab-pane" id="orange">
        <h1>Orange</h1>
        <p>orange orange orange orange orange</p>
    </div>
    <div class="tab-pane" id="yellow">
        <h1>Yellow</h1>
        <p>yellow yellow yellow yellow yellow</p>
    </div>
    <div class="tab-pane" id="green">
        <h1>Green</h1>
        <p>green green green green green</p>
    </div>
    <div class="tab-pane" id="blue">
        <h1>Blue</h1>
        <p>blue blue blue blue blue</p>
    </div>
</div>

Question 4

Recientemente tuve un problema con las pestañas de Bootstrap siguiendo sus pautas en línea , pero actualmente hay un error en su ejemplo de marcado data-tabs="tabs"falta en el <ul>elemento. Sin él, el uso data-togglede enlaces no funciona.

Question 5

Tengo el mismo problema, pero algunas respuestas anteriores pueden ser complicadas para mí.

Encontré la otra respuesta, tal vez resuelva su pregunta Twitter Bootstrap Js (pestañas, ventanas emergentes, menú desplegable) no funciona en Drupal

lugar jquery.jsantesbootstrap.tab.js

Question 6

Le falta la data-toggle="tab"etiqueta de datos en las URL de su menú, por lo que sus scripts no pueden decir dónde están los interruptores de pestaña:

HTML

<ul class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a data-toggle="tab" href="#red">Red</a></li>
    <li><a data-toggle="tab" href="#orange">Orange</a></li>
    <li><a data-toggle="tab" href="#yellow">Yellow</a></li>
    <li><a data-toggle="tab" href="#green">Green</a></li>
    <li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>

Question 7

Acabo de solucionar este problema agregando el elemento data-toggle = "tab" en la etiqueta de anclaje

<div class="container">

<!-------->
  <div id="content">

   <ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#red">Red</a></li>
<li><a data-toggle="tab"  href="#orange">Orange</a></li>
<li><a data-toggle="tab" href="#yellow">Yellow</a></li>
<li><a data-toggle="tab" href="#green">Green</a></li>
<li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="red">
    <h1>Red</h1>
    <p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
    <h1>Orange</h1>
    <p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
    <h1>Yellow</h1>
    <p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
    <h1>Green</h1>
    <p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
    <h1>Blue</h1>
    <p>blue blue blue blue blue</p>

y agregó lo siguiente en la sección principal http://code.jquery.com/jquery-1.7.1.js '>

Question 8

Probé los códigos del documento de bootstrap de la siguiente manera:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>tab demo</title>
  <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div class="span9">
    <div class="tabbable"> <!-- Only required for left/right tabs -->
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="tab1">
          <p>I'm in Section 1.</p>
        </div>
        <div class="tab-pane" id="tab2">
          <p>Howdy, I'm in Section 2.</p>
        </div>
      </div>
    </div>
</div> 
<script src="jquery.min.js"></script>
<script src="bootstrap.js"></script>
</body>
</html>

y funciona. Pero cuando cambio la posición de estos dos <script src...>, no funciona. Así que recuerde cargar su script jquery antes de bootstrap.js.

Question 9

Para mí, el problema era que no estaba incluyendo bootstrap.min.css (solo estaba incluyendo bootstrap-responsive.min.css).

Question 10

De hecho, hay otra forma sencilla de hacerlo. Funciona para mí, pero no estoy seguro para ustedes. La clave aquí es simplemente agregar el FADE en cada (panel de pestañas) y funcionará. Además, ni siquiera necesita la función de script o cualquier versión de jQuery. Aquí está mi código ... espero que les funcione a todos.

<div class="tab-pane fade" id="Customer">
    <table class="table table-hover table-bordered">
        <tr>
            <th width="40%">Contact Person</th>
            <td><?php echo $event['Event']['e_contact_person']; ?></td>
        </tr>
    </table>
</div>
<div class="tab-pane fade" id="Delivery">
    <table class="table table-hover table-bordered">
        <tr>
            <th width="40%">Time Arrive Warehouse Start</th>
            <td><?php echo $event['Event']['e_time_arrive_WH_start']; ?></td>
        </tr>
    </table>
</div>

Question 11

Esto lo resolvió cuando ninguno de los otros ejemplos lo hizo:

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});

Question 12

Tuve el mismo problema hasta que descargué bootstrap-tab.js y lo incluí en mi script, descargue desde aquí https://code.google.com/p/fusionleaf/source/browse/webroot/fusionleaf/com/www/inc /bootstrap/js/bootstrap-tab.js?r=82aacd63ee1f7f9a15ead3574fe2c3f45b5c1027

incluir bootsrap-tab.js justo debajo de jquery

<script type="text/javascript" src="bootstrap/js/bootstrap-tab.js"></script>

El código final se veía así:

 <!DOCTYPE html>
<html lang="en">
<head>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="libraries/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-tab.js"></script>
</head>

<body>

<div class="container">

<!-------->
<div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
        <li><a href="#orange" data-toggle="tab">Orange</a></li>
        <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
        <li><a href="#green" data-toggle="tab">Green</a></li>
        <li><a href="#blue" data-toggle="tab">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>


<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $('#tabs').tab();
    });
</script>    
</div> <!-- container -->


<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

</body>
</html>

Question 13

Como estoy trabajando con en Bootstrap Javascript Moduleslugar de cargar todo Bootstrap Javascript, mis pestañas no funcionaban porque olvidé cargar load/include/el node_modules/bootstrap/js/tab.jsarchivo.

Después de incluirlo, funcionó ...

Buena suerte

Question 14

Simplemente copie la etiqueta de secuencia de comandos para agregar bootstrap.jsdesde la sección principal hasta el final del cuerpo. Entonces todo debería funcionar bien incluso sin los scripts para activar las pestañas.

Answer 1

Estoy tratando de implementar pestañas de Twitter Bootstrap en el siguiente código, pero parece que no funciona. Se muestran las pestañas, pero cuando hago clic en ellas no sucede nada. A continuación se muestra el único código que estoy usando. Todos los demás scripts CSS / JS se copian del marco de Twitter Bootstrap.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="assets/twitterbootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/twitterbootstrap/css/bootstrap-responsive.css" rel="stylesheet">

</head>

<body data-spy="scroll" data-target=".subnav" data-offset="50">

<div class="container">

<!-------->
<div id="content">
    <ul class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red">Red</a></li>
        <li><a href="#orange">Orange</a></li>
        <li><a href="#yellow">Yellow</a></li>
        <li><a href="#green">Green</a></li>
        <li><a href="#blue">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $(".tabs").tabs();
    });
</script>    
</div> <!-- container -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap.js"></script>
</body>
</html>

Answer 2

3

Agregar también data-togglefuncionó para mí; esto también es cierto para Bootstrap 3. Aquí hay un bootply con un ejemplo funcional: bootply.com/74927

ericsoco

Answer 3

Necesita agregar el complemento de pestañas a su código

<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap-tab.js"></script>

Bueno, no funcionó. Hice algunas pruebas y empezó a funcionar cuando:

movió (actualizado a 1.7) el script jQuery a la <head>sección
agregado data-toggle="tab"a los enlaces y la identificación del <ul>elemento de pestaña
cambiado $(".tabs").tabs();a$("#tabs").tab();
y algunas otras cosas que no deberían importar

Aquí hay un código

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
</head>

<body>

<div class="container">

<!-------->
<div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
        <li><a href="#orange" data-toggle="tab">Orange</a></li>
        <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
        <li><a href="#green" data-toggle="tab">Green</a></li>
        <li><a href="#blue" data-toggle="tab">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>


<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $('#tabs').tab();
    });
</script>    
</div> <!-- container -->


<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>

</body>
</html>

Answer 4

12

Gracias Bartek; sin embargo, creo que el script bootstrap.js también contiene bootstrap-tab.js. Por favor, corríjame si estoy equivocado. De todos modos, agregué bootstrap-tab.js, y todavía no funciona.

DEREK N

Answer 5

Tiene razón, pero también depende de la compilación personalizada de bootstrap :) ... eliminó otra parte del comentario; no noté que estás

usando un

Answer 6

Probé eso también; No funciona. ¿El código HTML anterior funciona para usted?

DEREK N

Answer 7

4

Gracias Barek, ¡funcionó! Actualizar jQuery a 1.7 y alternar datos resolvió el problema. Ni siquiera necesita la etiqueta de script.

DEREK N

Answer 8

Gracias, esto realmente ayudó. No necesité mover el script de jquery, solo seguí los otros 3 pasos

Rob

Answer 9

Los elementos clave incluyen:

el class="nav nav-tabs"y data-tabs="tabs"deul
el data-toggle="tab"y href="#orange"dela
el class="tab-content"del divdel contenido
el class="tab-pane"y iddel div de los elementos

El código completo es el siguiente:

<ul class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a data-toggle="tab" href="#red">Red</a></li>
    <li><a data-toggle="tab" href="#orange">Orange</a></li>
    <li><a data-toggle="tab" href="#yellow">Yellow</a></li>
    <li><a data-toggle="tab" href="#green">Green</a></li>
    <li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="red">
        <h1>Red</h1>
        <p>red red red red red red</p>
    </div>
    <div class="tab-pane" id="orange">
        <h1>Orange</h1>
        <p>orange orange orange orange orange</p>
    </div>
    <div class="tab-pane" id="yellow">
        <h1>Yellow</h1>
        <p>yellow yellow yellow yellow yellow</p>
    </div>
    <div class="tab-pane" id="green">
        <h1>Green</h1>
        <p>green green green green green</p>
    </div>
    <div class="tab-pane" id="blue">
        <h1>Blue</h1>
        <p>blue blue blue blue blue</p>
    </div>
</div>

Answer 10

¿Qué pasa si quiero llamar a una función cuando una pestaña se activa para cargar el contenido de la pestaña?

sureshvv

Answer 11

Excelente, este consejo me ayudó. ¡Gracias!

NPC

Answer 12

Si estás usando esto con AngularJS, dale a ul un id = "myTabs", luego agrega: $ ('# myTabs a'). Click (function (e) {e.preventDefault (); $ (this) .tab ( 'show'); });

Robbie Smith

Answer 13

En esta respuesta, me gusta el hecho de que no se necesita javascript para inicializar una pestaña. Eso me ayudó. Gracias

Sincero

Answer 14

Recientemente tuve un problema con las pestañas de Bootstrap siguiendo sus pautas en línea , pero actualmente hay un error en su ejemplo de marcado data-tabs="tabs"falta en el <ul>elemento. Sin él, el uso data-togglede enlaces no funciona.

Answer 15

Tengo el mismo problema, pero algunas respuestas anteriores pueden ser complicadas para mí.

Encontré la otra respuesta, tal vez resuelva su pregunta Twitter Bootstrap Js (pestañas, ventanas emergentes, menú desplegable) no funciona en Drupal

lugar jquery.jsantesbootstrap.tab.js

Answer 16

Le falta la data-toggle="tab"etiqueta de datos en las URL de su menú, por lo que sus scripts no pueden decir dónde están los interruptores de pestaña:

HTML

<ul class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a data-toggle="tab" href="#red">Red</a></li>
    <li><a data-toggle="tab" href="#orange">Orange</a></li>
    <li><a data-toggle="tab" href="#yellow">Yellow</a></li>
    <li><a data-toggle="tab" href="#green">Green</a></li>
    <li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>

Answer 17

Acabo de solucionar este problema agregando el elemento data-toggle = "tab" en la etiqueta de anclaje

<div class="container">

<!-------->
  <div id="content">

   <ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#red">Red</a></li>
<li><a data-toggle="tab"  href="#orange">Orange</a></li>
<li><a data-toggle="tab" href="#yellow">Yellow</a></li>
<li><a data-toggle="tab" href="#green">Green</a></li>
<li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="red">
    <h1>Red</h1>
    <p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
    <h1>Orange</h1>
    <p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
    <h1>Yellow</h1>
    <p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
    <h1>Green</h1>
    <p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
    <h1>Blue</h1>
    <p>blue blue blue blue blue</p>

y agregó lo siguiente en la sección principal http://code.jquery.com/jquery-1.7.1.js '>

Answer 18

Probé los códigos del documento de bootstrap de la siguiente manera:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>tab demo</title>
  <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div class="span9">
    <div class="tabbable"> <!-- Only required for left/right tabs -->
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="tab1">
          <p>I'm in Section 1.</p>
        </div>
        <div class="tab-pane" id="tab2">
          <p>Howdy, I'm in Section 2.</p>
        </div>
      </div>
    </div>
</div> 
<script src="jquery.min.js"></script>
<script src="bootstrap.js"></script>
</body>
</html>

y funciona. Pero cuando cambio la posición de estos dos <script src...>, no funciona. Así que recuerde cargar su script jquery antes de bootstrap.js.

Answer 19

0

Para mí, el problema era que no estaba incluyendo bootstrap.min.css (solo estaba incluyendo bootstrap-responsive.min.css).

Jon Onstott
fuente

Answer 20

De hecho, hay otra forma sencilla de hacerlo. Funciona para mí, pero no estoy seguro para ustedes. La clave aquí es simplemente agregar el FADE en cada (panel de pestañas) y funcionará. Además, ni siquiera necesita la función de script o cualquier versión de jQuery. Aquí está mi código ... espero que les funcione a todos.

<div class="tab-pane fade" id="Customer">
    <table class="table table-hover table-bordered">
        <tr>
            <th width="40%">Contact Person</th>
            <td><?php echo $event['Event']['e_contact_person']; ?></td>
        </tr>
    </table>
</div>
<div class="tab-pane fade" id="Delivery">
    <table class="table table-hover table-bordered">
        <tr>
            <th width="40%">Time Arrive Warehouse Start</th>
            <td><?php echo $event['Event']['e_time_arrive_WH_start']; ?></td>
        </tr>
    </table>
</div>

Answer 21

Ya había incluido la fadeclase, pero las pestañas solo funcionaban en Google Chrome con asnc bootstrap.min.js-file. Después de agregar data-toggle="tab"las pestañas, también funcionaron en Mozilla Firefox y MS Edge.

Grischa

Answer 22

0

Esto lo resolvió cuando ninguno de los otros ejemplos lo hizo:

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});

Brock Hensley
fuente

Answer 23

Tuve el mismo problema hasta que descargué bootstrap-tab.js y lo incluí en mi script, descargue desde aquí https://code.google.com/p/fusionleaf/source/browse/webroot/fusionleaf/com/www/inc /bootstrap/js/bootstrap-tab.js?r=82aacd63ee1f7f9a15ead3574fe2c3f45b5c1027

incluir bootsrap-tab.js justo debajo de jquery

<script type="text/javascript" src="bootstrap/js/bootstrap-tab.js"></script>

El código final se veía así:

 <!DOCTYPE html>
<html lang="en">
<head>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="libraries/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-tab.js"></script>
</head>

<body>

<div class="container">

<!-------->
<div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
        <li><a href="#orange" data-toggle="tab">Orange</a></li>
        <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
        <li><a href="#green" data-toggle="tab">Green</a></li>
        <li><a href="#blue" data-toggle="tab">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>


<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $('#tabs').tab();
    });
</script>    
</div> <!-- container -->


<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

</body>
</html>

Answer 24

Gracias, esto es lo único que finalmente funcionó para mí. Pregunta: ¿por qué no se incluyó este archivo en la descarga de bootstrap original si funciona tan bien? Solo quiero asegurarme de tener acceso a todo lo que necesito para que bootstrap funcione en el futuro.

user2223059

Answer 25

Como estoy trabajando con en Bootstrap Javascript Moduleslugar de cargar todo Bootstrap Javascript, mis pestañas no funcionaban porque olvidé cargar load/include/el node_modules/bootstrap/js/tab.jsarchivo.

Después de incluirlo, funcionó ...

Buena suerte

Answer 26

Simplemente copie la etiqueta de secuencia de comandos para agregar bootstrap.jsdesde la sección principal hasta el final del cuerpo. Entonces todo debería funcionar bien incluso sin los scripts para activar las pestañas.

Las pestañas de Twitter Bootstrap no funcionan: cuando hago clic en ellas no pasa nada

Respuestas: