如何在悬停而不是单击时使用 twitter 引导选项卡？

Posted 2023-03-06

【中文标题】如何在悬停而不是单击时使用 twitter 引导选项卡？

【英文标题】：How to make with twitter bootstrap tabs on hover instead of clicking?

【发布时间】：2012-04-06 14:22:48

【问题描述】：

我终于可以使用 Bootstrap 选项卡了。我想知道是否有办法改变行为，而不是单击只是悬停光标会显示隐藏的内容？

【问题讨论】：

另见：***.com/questions/8878033/…

这个问题[在这里回答][1] 使用了几行 css！ [1]：***.com/questions/8878033/…

【参考方案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');
);

这将阻止用户第一次单击选项卡后的悬停选择。

【参考方案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>

【讨论】：

我猜你需要更新你的 github 页面中的 Demo 链接。

这是最好的解决方案，但它不再适用于 Bootstrap 5。BS5 有哪些必要的更改？

【参考方案3】：

javascript：

在您的 $(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>

【参考方案4】：

修改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'

注意：我使用 Bootstrap v2.0.2 对此进行了测试

【参考方案5】：

直接来自我的生产代码。正交、不显眼，可以“取消点击”任何用户界面。可以修改选择器以匹配多种可点击。

$(document).on('mouseover','.js-mouseover-to-click',function (event) 
    $(event.target).trigger('click');
);

【参考方案6】：

我希望这是一个很好的解决方案

(function ($) 
  $(function () 
    $(document).off('click.bs.tab.data-api', '[data-hover="tab"]');
    $(document).on('mouseenter.bs.tab.data-api', '[data-toggle="tab"], [data-hover="tab"]', function () 
      $(this).tab('show');
    );
  );
)(jQuery);