क्लिक करने के बजाय होवर पर ट्विटर बूटस्ट्रैप टैब के साथ कैसे करें?

Question

मुझे अंततः बूटस्ट्रैप टैब काम करने के लिए मिला। मैं सोच रहा था कि क्या व्यवहार बदलने का कोई तरीका है, इसलिए बस कर्सर को घुमाने पर क्लिक करने से छुपा सामग्री दिखाई देगी?

Answer 1

आपकेमें

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

आप अभ्यस्त कोर बूटस्ट्रैप कोड को संशोधित करने के लिए है:या कहीं और ...

कुछ इस तरह डाल दिया।

इसके अतिरिक्त आप ऐसा कर सकता है:

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

कौन सा पहली बार एक उपयोगकर्ता एक टैब पर क्लिक करती बाद मंडराना चयन नहीं कर पाएगा।

Answer 2

संशोधित bootstrap.js (या boostrap-tab.js यदि आप पूर्ण bootstrap.js फ़ाइल का उपयोग नहीं कर रहे हैं)

आप कहाँ देखें:

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

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

परिवर्तन 'click.tab.data-api''hover.tab.data-api' को

नोट: मैं के साथ इस परीक्षण किया बूटस्ट्रैप v2.0.2

Answer 3

जावास्क्रिप्ट:

अपने $ में (document) .ready या कहीं और ...
कुछ इस तरह से रख:

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

यह बाँध बेहतर है दस्तावेज़ ऑब्जेक्ट पर एक हैंडलर ताकि यह गतिशील रूप से जेनरेट किए गए टैब के साथ भी काम करेगा:

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

इसके अलावा एक छोटा बूटस्ट्रैप प्लगइन है जो स्वचालित रूप से होवर पर टैब सक्रिय करता है: https://github.com/tonystar/bootstrap-hover-tabs।

इस प्लगइन का उपयोग कर पूरा HTML है:

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>