Come fare con le schede di bootstrap di twitter al passaggio del mouse anziché fare clic?

Question

Ho finalmente ottenuto le schede Bootstrap per funzionare. Mi stavo chiedendo se c'è un modo per cambiare il comportamento, quindi, invece di fare clic con il mouse sul cursore, mostrerebbe il contenuto nascosto?

Answer 1

Nel tuo $(document).ready o altrove ...

messo qualcosa di simile:

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

Non dovrete modificare il codice di bootstrap nucleo.

Inoltre si potrebbe fare questo:

$('.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'); 
}); 

che impedirà selezione hover dopo la prima volta che un utente fa clic su una scheda.

Answer 2

Modifica bootstrap.js (o boostrap-tab.js se non si utilizza la piena bootstrap.js file)

Dove vedete:

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

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

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

Nota: ho provato questo con Bootstrap v2.0.2

Answer 3

JavaScript:

nel $ (document) .ready o altrove ...
mettere qualcosa di simile:

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

HTML:

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

Answer 4

E 'meglio bind un gestore sull'oggetto documento in modo che funzioni anche con le schede generate dinamicamente:

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

Inoltre v'è un piccolo plug-in bootstrap che automaticamente attiva linguette hover: https://github.com/tonystar/bootstrap-hover-tabs.

Il codice HTML completo utilizzando questo plugin è:

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>