Bootstrap 如何使Twitter的引导选项卡悬停而不是点击?

h7wcgrx3  于 2023-09-28  发布在  Bootstrap
关注(0)|答案(7)|浏览(138)

我终于让Bootstrap标签工作了。我想知道是否有一种方法来改变行为,而不是点击只是悬停光标将显示隐藏的内容?

oxalkeyp

oxalkeyp1#

在您的$(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');
});

这将防止用户在第一次单击选项卡后进行悬停选择。

qpgpyjmq

qpgpyjmq2#

最好在document对象上绑定一个处理程序,这样它也可以处理动态生成的选项卡:

$(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>
x7yiwoj4

x7yiwoj43#

JavaScript代码:
在您的$(document).ready或其他地方...
写这样的东西:

$('.nav-tabs[data-toggle="tab-hover"] > li > a').hover( function(){
    $(this).tab('show');
});

超文本标记语言:

<ul class="nav nav-tabs" data-toggle="tab-hover">
    ....
</ul>
u0njafvf

u0njafvf4#

修改bootstrap.js(如果不使用完整的bootstrap.js文件,则修改boostrap-tab.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测试了这个

0ejtzxu1

0ejtzxu15#

从我的生产代码。正交,不显眼,可以“取消点击”任何用户界面。可以修改选择器以匹配多种可单击项。

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

beq87vna6#

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

(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);
ugmeyewa

ugmeyewa7#

var triggerTabList = [].slice.call(document.querySelectorAll('.nav-link'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl);
  triggerEl.addEventListener('mouseenter', function (event) {
    event.preventDefault();
    tabTrigger.show();
  });
});

相关问题