如何使用Twitter引导标签悬停而不是点击？

Question

我终于让Bootstrap标签工作了.我想知道是否有办法改变行为,而不是点击只是悬停光标会显示隐藏的内容？

Answer 1

在你$(document).ready或其他地方......

把这样的东西:

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

最好在文档对象上绑定处理程序,以便它也可以使用动态生成的选项卡:

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

还有一个小的Bootstrap插件可以自动激活悬停时的标签: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>