Question

我使用rails构建了一个带有'tabs'的网页。当用户单击选项卡时，将加载新页面。我想格式化它，以便用户点击它们时，标签总是在页面上的相同位置。只要用户没有在页面上向下滚动，就会发生这种情况。如果用户向下滚动，单击选项卡将刷新页面并且不再向下滚动 - 这使得单击选项卡看起来很糟糕。有没有办法在不使用Javascript的情况下将该位置保留在用户向下滚动的页面上？如果必须使用Javascript，任何建议？
Ť alt text http://img.skitch.com/20100526-xtrn2ncbetj6bs1a2s4xwywfjh.png

Answer 1

没有Javascript，没有。如果他们在一个确切的位置，你会很高兴，使用一个锚（example.html#anchor），但由于你不知道确切的位置，你几乎没有运气。

很抱歉！

Answer 2

你可以这样做，但你需要少量的Javascript和一些CSS隐藏。

假设这些是你的标签：

<ul id="nav">
  <li class="tab"><a href="#content1">Content 1</a></li>
  <li class="tab"><a href="#content2">Content 2</a></li>
</ul>

假设这是你的内容：

<div id="content" class="content1">
  <div id="content1">
    <h1>Some content</h1>
    <p>This is my content.</p>
  </div>

  <div id="content2">
    <h1>More content</h1>
    <p>This is my other content.</p>
  </div>
</div>

您需要做的是，我正在使用Ext.Core库进行演示，是：

<script type="text/javascript">
Ext.onReady(function() {
  Ext.select('.tab a').on('click', function(ev, el) {
    ev.stopEvent();
    var content_id = el.href.replace('#', '');
    Ext.get('content').removeClass(['content1', 'content2', ...]).addClass(content_id);
  });
});
</script>

你还需要一个像这样的小小的CSS：

#content.content2 #content1,
#content.content1 #content2 {
  display:none;
}

这隐藏了我们没有看到的其他内容。我们在名为contentN的内容容器上设置了一个类，该类是该选项卡链接的href。因此，如果我们有一个包含href="#content1"的标签，那么我们会在名为content1的内容容器中添加一个类，现在该内容可见而其他内容则不可用。

Ext.Core示例页面有另一种方法，它们有一个example up showing it working。他们的方式比这更重要。

当用户点击选项卡（使用Rails而不是Javascript）时，我可以阻止页面“滚动”回到顶部吗？

2 个答案: