我正在尝试使用引导选项卡单击功能,但我在使用从 stackoverflow 获得的 anchor 标记的动画时遇到了问题。似乎单击功能弄乱了选项卡的单击功能有没有办法解决这个问题?
<div id="tab1">
<ul class="tab1-titles">
<li class="active">
<a href="#1a" data-toggle="tab">Tab1</a>
</li>
<li>
<a href="#2a" data-toggle="tab">Tab2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="1a">
<ul>
<li>list-item-1</li>
<li>list-item-2</li>
</ul>
</div>
<div class="tab-pane active" id="2a">
<ul>
<li>list-item-1</li>
<li>list-item-2</li>
</ul>
</div>
</div>
</div>
Javascript
$(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
}, 1000);
return false;
}
}
});
});
最佳答案
无需添加新的click
事件处理程序,只需使用如下所示的内置选项卡更改事件
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
var hash = $(e.target).attr("href");
//your code goes here
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(hash);
target = target.length ? target : $('[name=' + hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
}
}
});
关于javascript - anchor 转换与选项卡的 Bootstrap 单击功能冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39087632/