我确实添加了JavaScript代码,用于使用菜单对每个带有ID的块进行滚动动画处理。然后我添加了 Bootstrap 的选项卡,由于我的动画滚动而弄乱了。
我想知道如何让我的滚动动画停止在引导选项卡上工作?
滚动动画代码
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 800);
return false;
}
}
});
});
引导选项卡
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
我遇到了同样的问题并像这样修复了它。在代码的开头:
$(function() {
$('a[href*=#]:not([href=#])').click(function() {`
您必须在"A"类别中添加一个类。假设您将类scrollnav
添加
它将是这样的:
$(function() {
$('a.scrollnav[href*=#]:not([href=#])').click(function() {`
因此,此代码(平滑滚动)仅适用于具有此类的a
元素。
你的 Java 应该看起来像:
$(function() {
$('a.scrollnav[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 800);
return false;
}
}
});
});
菜单(或其他导航链接)中的每个a
元素都必须具有类scrollnav
。