下面是我的代码,但我知道它没有任何问题,因为当它从标签中取出时它可以正常工作.也没有重复的Id,我认为可能导致问题.无论如何,如果有人有任何想法或变通办法那将是伟大的！
最佳答案
这不是Bootstrap中的错误.发生的事情是,当您的页面加载时,带有scrollspy元素的选项卡将被隐藏.因此,当scrollspy插件试图找到每个< h4 id =“foo”>的$.position()时在你的滚动div中,他们调用return {top：0,left：0}.这就是你滚动时看到闪烁的原因;该插件认为所有滚动目标都处于相同位置.
如果您查看documentation for the scrollspy plugin,您会看到它提到如果您要从DOM添加或删除元素,则需要调用.scrollspy(‘refresh’)函数,以便插件可以重新评估各种位置滚动目标.
也就是说,您需要做的是等到加载了scrollspy内容的选项卡,然后调用刷新函数,就像这样.请注意,我还将所有单独的单击处理程序组合到一个处理程序中
$(function(){
$('.nav-tabs li a').click(function(e) {
e.preventDefault();
$(this).tab('show');
// If we are showing the scrollspy tab,let the
// plugin refresh itself so it can function properly
if(this.id === 'scrotab') {
$(this).on('shown',function(){
$('#scrollspy-example').scrollspy('refresh');
});
}
});
});
此外,而不是在< div id =“scrollspy-example”>上使用data-offset =“300”属性.在元素中,您需要使用CSS将元素的位置设置为相对：
#scrollspy-example {
position: relative;
}
这是一个有效的jsFiddle演示：
原文链接：https://www.f2er.com/css/427445.html