Question

我正在使用Zurb基础来创建简单的标签，如seen here。

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

这是我的代码：

<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

添加一个哈希标记和一个网址的结尾会使您的浏览器“有时”返回顶部，也许使用javascript作为网址可能是解决方案吗？

Answer 2

它似乎是由视图高度大小的变化引起的。标签之间的高度差异似乎导致了它。这是我为不同的脚本找到的一个黑客攻击，但它实现了这个技巧

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

在第一个选项卡上首先单击，浏览器视图向上移动

2 个答案: