¿Cómo hacer con las pestañas de arranque de twitter al pasar el mouse en lugar de hacer clic?

Finalmente conseguí que las pestañas Bootstrap funcionen. Me preguntaba si hay una forma de cambiar el comportamiento, así que, en lugar de hacer clic solo sobre el cursor, ¿se mostraría el contenido oculto?¿Cómo hacer con las pestañas de arranque de twitter al pasar el mouse en lugar de hacer clic?

Fuente

2012-03-22 Pablo Olmos de Aguilera C.

También, ver: http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap- menu-dropdown-on-hover-rather-click –

La pregunta es [respondida aquí] [1] usando algunas líneas de css! [1]: Gracias http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click – kolydart

En su $(document).ready o en otro lugar ...

poner algo como esto:

$('.nav-tabs > li > a').hover(function() { 
    $(this).tab('show'); 
});

Usted no tiene que modificar el código de arranque del núcleo.

Además usted puede hacer esto:

$('.nav-tabs > li ').hover(function() { 
    if ($(this).hasClass('hoverblock')) 
    return; 
    else 
    $(this).find('a').tab('show'); 
}); 

$('.nav-tabs > li').find('a').click(function() { 
    $(this).parent() 
    .siblings().addClass('hoverblock'); 
});

lo que evitará la selección vuelo estacionario después de la primera vez que un usuario hace clic en una ficha.

Fuente

2012-03-28 12:43:12 Neuralrank

Modificar bootstrap.js (o boostrap-tab.js si no está utilizando el archivo completo bootstrap.js)

Dónde se ve:

/* TAB DATA-API 
    * ============ */ 

    $(function() { 
    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { 
     e.preventDefault() 
     $(this).tab('show') 
    }) 
    })

cambio del 'click.tab.data-api' a 'hover.tab.data-api'

Nota: He probado esto con Bootstrap v2.0.2

Fuente

2012-03-22 01:52:37 kendaleiv

JavaScript:

En sus $ (document) ready o en otro lugar ...
poner algo como esto:

$('.nav-tabs[data-toggle="tab-hover"] > li > a').hover(function(){ 
    $(this).tab('show'); 
});

HTML:

<ul class="nav nav-tabs" data-toggle="tab-hover"> 
    .... 
</ul>

Fuente

2013-08-07 02:59:47 miclle

Es mejor que se unen un manejador en el objeto del documento por lo que también funcionará con pestañas generadas dinámicamente:

$(document).on('mouseenter', '[data-toggle="tab"]', function() { 
    $(this).tab('show'); 
});

También hay un pequeño plugin Bootstrap que automáticamente activa lengüetas en vuelo estacionario: https://github.com/tonystar/bootstrap-hover-tabs.

El HTML completa utilizando este plugin es:

body { padding: 2rem; } 
 
.tab-content { margin-top: 1.5rem; }

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<!-- Nav pills --> 
 
<ul class="nav nav-pills"> 
 
    <li class="active"><a href="#tab-1" data-toggle="tab">Tab 1</a></li> 
 
    <li><a href="#tab-2" data-toggle="tab">Tab 2</a></li> 
 
    <li><a href="#tab-3" data-toggle="tab">Tab 3</a></li> 
 
    <li><a href="#tab-4" data-toggle="tab">Tab 4</a></li> 
 
</ul> 
 

 
<!-- Tab panes --> 
 
<div class="tab-content well"> 
 
    <div class="tab-pane active" id="tab-1">Content 1</div> 
 
    <div class="tab-pane" id="tab-2">Content 2</div> 
 
    <div class="tab-pane" id="tab-3">Content 3</div> 
 
    <div class="tab-pane" id="tab-4">Content 4</div> 
 
</div> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<script src="//cdn.rawgit.com/tonystar/bootstrap-hover-tabs/v3.1.1/bootstrap-hover-tabs.js"></script>

Fuente

2015-06-21 21:00:17 tonystar

esto funciona para yo;) –

buen código. funciona bien ... –

¿Cómo hacer con las pestañas de arranque de twitter al pasar el mouse en lugar de hacer clic?

Respuesta

Cuestiones relacionadas