[英]Bootstrap Togglable tabs. How can I show the .tab-pane content when I hover over the `.nav-tabs > li`, then hide the content when the mouse leaves?
我有使用Twitter Bootstrap切换的选项卡。 我的问题是我的.tab-content
隐藏了,我想在鼠标指针进入.nav-tabs > li
时显示它,并在鼠标指针离开元素时隐藏它。
这是我的代码:
<div role="tabpanel" class="tabpanel">
<div class="container">
<!-- company tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">
<a href="#sigma" aria-controls="sigma" role="tab" data-toggle="tab" class="boxopacity">
<span>TAb1</span>
</a>
</li>
<li role="presentation">
<a href="#alpek" aria-controls="alpek" role="tab" data-toggle="tab" class="boxopacity">
<span>TAb2</span>
</a>
</li>
<li role="presentation">
<a href="#nemak" aria-controls="nemak" role="tab" data-toggle="tab" class="boxopacity">
<span>TAb3</span>
</a>
</li>
</ul><!-- .end company tabs -->
<!-- company information -->
<div class="tab-content">
<!-- company sigma -->
<div role="tabpanel" class="tab-pane fade" id="sigma">
<div class="box largebox">
<div class="content">
<h5>Tab1</h5>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Productos principales</h6>
<h6>Mercados</h6>
<ul>
<li>Alimentos</li>
</ul>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Cifras relevantes</h6>
<ul class="relevant">
</ul>
</div>
</div>
<div class="box mediumbox">
</div>
</div>
<!-- company alpek -->
<div role="tabpanel" class="tab-pane fade" id="alpek">
<div class="box largebox">
<div class="content">
<h5>Tab2</h5>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Productos principales</h6>
<h6>Mercados</h6>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Cifras relevantes</h6>
<ul class="relevant">
<li>Plantas</li>
</ul>
</div>
</div>
<div class="box mediumbox">
</div>
</div>
<!-- company nemak -->
<div role="tabpanel" class="tab-pane fade" id="nemak">
<div class="box largebox">
<div class="content">
<h5>Tab3</h5>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Productos principales</h6>
<h6>Mercados</h6>
<ul>
<li>Automortiz.</li>
</ul>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Cifras relevantes</h6>
<ul class="relevant">
</ul>
</div>
</div>
<div class="box mediumbox">
</div>
</div>
</div><!-- .end company information -->
</div>
</div>
我的Jquery:
<script>
$(document).ready(function (){
$('.nav-tabs > li > a').hover(function () {
$(this).tab('show');
}, function () {
});
});
</script>
您可以使用mouseenter和mouseleave来做,就像我刚刚创建的小提琴一样:
http://jsfiddle.net/jep0n6p9/3/
jQuery的
$( '.nav-tabs' ).mouseenter( handlerIn );
$( '.tab-content' ).mouseleave( handlerOut );
function handlerIn() {
$('.tab-content').show();
}
function handlerOut() {
$('.tab-content').hide();
}
请在nav-tab
上使用mouseleave事件隐藏标签的内容。
请检查此链接: http : //jsfiddle.net/yLq1df22/
希望这对您有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.