如何使用twitter引导标签悬停而不是点击？ [英] How to make with twitter bootstrap tabs on hover instead of clicking?

问题描述

我终于获得了Bootstrap标签。我想知道是否有一种方法可以改变行为，而不是单击鼠标悬停光标将会显示隐藏的内容？ 解决方案

在您的 $（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'）; 
}）; 
 $ b $（'。nav-tabs> li'）。find（'a'）。click（function（）{
 $（this）.parent（）
 .siblings（）。addClass（'hoverblock'）; 
}）; 
  

在用户第一次点击标签后，这将防止悬停选择。

I finally got Bootstrap tabs to work. I was wondering if there's a way to change the behaviour so instead of clicking just hovering the cursor would show the hidden content?

解决方案

In your $(document).ready or elsewhere ...

put something like this:

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

You wont have to modify the core bootstrap code.

Additionally you could do this:

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

Which will prevent hover selection after the first time a user clicks a tab.

这篇关于如何使用twitter引导标签悬停而不是点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！