如何避免滚动到顶部时打开引导标签
问题描述:
我想打开特定的引导选项卡从单击一个外部链接。如何避免滚动到顶部时打开引导标签
<ul class="nav nav-tabs">
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#message" data-toggle="tab">Messages</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="profile">Contents</div>
<div class="tab-pane" id="message">Contents</div>
</div>
// Out side link which is place on different page:
<a href="index.php?p=edit-profile#profile">Profile Link From Outside</a>
这是我尝试过使用jQuery:
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})
这是正确地打开我的标签。但我的问题是,当它打开页面滚动到页面的顶部。有没有办法避免这个问题?
我把它与.scrollTop();
并列,但我无法弄清楚。
添加.scrollTop();
后,我的代码看起来像这样。
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
$('html,body').scrollTop(300);
});
任何想法将不胜感激。 谢谢。
答
我发现,Firefox的我只好也加入e.stopImmediatePropagation()
$('.nav-tabs li a').click(function(e){
e.preventDefault();
e.stopImmediatePropagation();
$(this).tab('show');
});
希望这有助于
也许它滚动到标签?如果是这种情况,您可以使用class更改id或防止链接的默认行为。 – Marii
尝试在'shown.bs.tab'事件上添加'e.preventDefault();'。 – D4V1D
[如何用jQuery停止默认链接点击行为]的可能重复(http://*.com/questions/5632031/how-to-stop-default-link-click-behavior-with-jquery) – D4V1D