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();
});
});
7条答案
按热度按时间oxalkeyp1#
在您的
$(document).ready
或其他地方...写这样的东西:
您不必修改核心引导代码。
此外,您可以这样做:
这将防止用户在第一次单击选项卡后进行悬停选择。
qpgpyjmq2#
最好在document对象上绑定一个处理程序,这样它也可以处理动态生成的选项卡:
还有一个小的Bootstrap插件,它会在悬停时自动激活标签:https://github.com/tonystar/bootstrap-hover-tabs。
使用此插件的完整HTML是:
x7yiwoj43#
JavaScript代码:
在您的$(document).ready或其他地方...
写这样的东西:
超文本标记语言:
u0njafvf4#
修改
bootstrap.js
(如果不使用完整的bootstrap.js
文件,则修改boostrap-tab.js
)您可以看到:
将
'click.tab.data-api'
更改为'hover.tab.data-api'
注意:我用Bootstrap v2.0.2测试了这个
0ejtzxu15#
从我的生产代码。正交,不显眼,可以“取消点击”任何用户界面。可以修改选择器以匹配多种可单击项。
beq87vna6#
我希望这是一个很好的解决方案
ugmeyewa7#