Question

我正在尝试通过单击外部链接打开特定的引导选项卡。

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

任何想法都会受到高度赞赏。谢谢。

Answer 1

我发现对于Firefox我还必须添加 e.stopImmediatePropagation（）

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

希望这有帮助

打开引导选项卡时如何避免滚动到顶部

1 个答案: