Question

我目前正在使用bootsrap。

我有一个主导航菜单。

我将主导航下拉菜单中的每个部分链接到另一个具有特定ID的页面，该ID是另一页面上的一组标签。

（Visual Composer Tabs - Wordpress）

下面的哈希更改功能显示页面的顶部一秒钟，但它仍然滚动到哈希...

更新HashChange无法正常工作

  $(window).on('hashchange',function(e){
  document.body.scrollTop = 0; 
  e.preventDefault();
});

更新 - 工作不正常

 $('.link-2').click(function() {    
$('html,body').animate({ scrollTop: $("#1234567891011").offset().top }); 
 });

我直接以这种方式链接它，以便在单击链接时该选项卡显示为活动状态。

我的代码如下。

<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="http://myURL#123456789">Title<span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li>
      <a class="link-2" href="http://myURL#1234567891011">Tab Link 1</a>
    </li>
    <li>
      <a class="link-3" href="http://myURL#1234567891011">Tab Link 2</a>
    </li>
  </ul>
</li>

问题是当链接打开时，它会自动转到带有该ID的选项卡部分，这会在选项卡之前删除一半信息。

我需要将其加载到页面顶部，但仍保持标签处于活动状态。我怎么能用Jquery做到这一点？

Answer 1

改变你的哈希不要触发滚动

将您的哈希值更改为：＃tab_1234567891011 在您要导航的页面中，通过拆分此哈希值来获取选项卡的ID

id = window.location.hash.split('_')[1];

使用新ID激活标签：

$('#'+id).tab('show');

加载链接后的Jquery，滚动到顶部

1 个答案: