jquery - 在第一个选项卡上第一次单击时，浏览器视图向上移动

Question

我正在使用 Zurb 基础来创建简单的选项卡，如此处所示。

一切都很好，但是，当我第一次单击另一个选项卡时，浏览器中的视图会发生变化。它似乎在向上移动。我认为它就像链接一样，用锚标签移动它。在随后的点击中，它不会这样做。

这是我的代码：

<dl class="tabs">
  <dd class="active"><a href="#simple1">Overview</a></dd>
  <dd><a href="#simple2">Location</a></dd>
  <dd><a href="#simple2">Features</a></dd>
  <dd><a href="#simple2">Reviews</a></dd>
  <dd><a href="#simple2">Promotions</a></dd>
  <dd><a href="#simple2">T&amp;C's</a></dd>
</dl>
<ul class="tabs-content">
  <li class="active" id="simple1Tab">
...
  </li>
...
</ul>

Answer 1

添加一个井号标签和一个 url 的结尾会使您的浏览器“有时”进入顶部，也许使用 javascript 作为 url 可能是解决方案？

Answer 2

它似乎是由视图高度大小的变化引起的。选项卡之间的高度差异似乎是造成它的原因。这是我为不同脚本找到的 hack，但它成功了

/* 'Prevents Jumping Javascript Effect on Tabs and Sorter' */ html, body {
    height: 100%;
    margin: 0 0 1px;
    padding: 0;
}