span example bootstrap html twitter-bootstrap

html - example - Las pestañas de Twitter Bootstrap no funcionan para mí



tooltip html (13)

Acabo de solucionar este problema añadiendo 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 agregué lo siguiente en la sección principal http://code.jquery.com/jquery-1.7.1.js ''>

Soy nuevo en Twitter Bootstrap (y desarrollador web en general), y estoy tratando de implementar sus pestañas en el siguiente código, pero parece que no funciona. Las pestañas se muestran, pero cuando hago clic en ellas, no pasa nada. ¿Puede alguien ayudarme? A continuación está el único código que estoy usando. Todos los demás scripts CSS / JS se copian del marco 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>

Como estoy trabajando con los Bootstrap Javascript Modules lugar de cargar todo el Bootstrap Javascript , mis pestañas no funcionaban porque olvidé cargar el archivo load/include/ the node_modules/bootstrap/js/tab.js

Después de incluirlo, funcionó ...

Buena suerte

Debes agregar el complemento de pestañas a tu código

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

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

  1. movido (actualizado a 1.7) guión jQuery a la sección <head>
  2. se agregó data-toggle="tab" a los enlaces y al id para el elemento <ul> tab
  3. cambiado $(".tabs").tabs(); a $("#tabs").tab();
  4. 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>

En realidad, hay otra manera fácil de hacerlo. Funciona para mí, pero no estoy seguro para ustedes, chicos. La clave aquí, es simplemente agregar el FADE en cada uno (panel de pestañas) y funcionará. Además, ni siquiera necesitas guiar la función o la versión de jQuery. Aquí está mi código ... espero que funcione para todos ustedes.

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

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

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

Le falta la etiqueta de data-toggle="tab" en las URL de su menú para que sus scripts no puedan decir dónde están sus conmutadores de pestañas:

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>

Los elementos clave incluyen:

  1. la class="nav nav-tabs" y data-tabs="tabs" de ul
  2. the data-toggle="tab" y href="#orange" de la a
  3. la class="tab-content" del div del contenido
  4. la class="tab-pane" y id del dic de los ítems

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>

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

Probé los códigos del documento 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. Por lo tanto, recuerde cargar su script jquery antes de bootstrap.js.

Simplemente copie la etiqueta del script para agregar el bootstrap.js desde la sección del encabezado hasta el final del cuerpo. Entonces todo debería funcionar bien incluso sin los scripts para activar las pestañas.

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

incluye el bootsrap-tab.js en el justo debajo del 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>

Tuve un problema con las pestañas Bootstrap recientemente siguiendo sus directrices en línea , pero actualmente hay un error en su marcado data-tabs="tabs " falta en el elemento <ul> . Sin él, usar data-toggle on links no funciona.