如何避免滚动到顶部时打开引导标签

我想打开特定的引导选项卡从单击一个外部链接。如何避免滚动到顶部时打开引导标签

<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); 
});

任何想法将不胜感激。谢谢。

来源

2015-07-20 user3733831

也许它滚动到标签？如果是这种情况，您可以使用class更改id或防止链接的默认行为。 – Marii

尝试在'shown.bs.tab'事件上添加'e.preventDefault（）;'。 – D4V1D

[如何用jQuery停止默认链接点击行为]的可能重复（http://stackoverflow.com/questions/5632031/how-to-stop-default-link-click-behavior-with-jquery） – D4V1D

我发现，Firefox的我只好也加入e.stopImmediatePropagation（）

$('.nav-tabs li a').click(function(e){ 
    e.preventDefault(); 
    e.stopImmediatePropagation(); 
    $(this).tab('show'); 
});

希望这有助于

来源

2015-10-28 18:22:18

如何避免滚动到顶部时打开引导标签

回答

相关问题