Question

我正试图在我的网站上浏览一个旅游页面，我喜欢37signals的Basecamp之旅的样子：http://basecamphq.com/tour/#/communicate

我假设他们使用Jquery或其他等价物来交换div，但我是一个完整的jquery菜鸟，我不知道如何解决这个问题。

如果有人有任何建议或资源指出我这一点，我们将不胜感激。

干杯！

Answer 1

您可以在每个子页面的导览页面上找到导航链接，它们可能是这样的：

<ul>
  <li>
    <a href="#stuff1" class="tour-nav-link" id="l-1" data-content-id="t-1">Stuff 1</a>
  </li>
  <li>
    <a href="#stuff2" class="tour-nav-link" id="l-2" data-content-id="t-2">Stuff 2</a>
  </li>
</ul>

注意链接中的data-content-id属性，您将相应div标签的ID放入其中作为匹配它们的方式。

您还可以在自己的div中拥有每个游览“子页面”。您的旅游页面将包含以下代码：

<div id="t-1" class="tour-item first">
  Stuff goes here
</div>
<div id="t-2" class="tour-item">
  Different stuff goes here
</div>

使用CSS，您可以隐藏除第一个之外的所有div。这将放在你的CSS文件中：

div.tour-item { display: none; }
div.tour-item.first { display: block; }

现在您只需要在点击链接时切换可见性：jquery：

$('a.tour-nav-link').live('click', function(){
  /* This next line using an animation to hide all div's that are not the selected one */
  $('div.tour-item').not('div#' + $(this).data('content-id')).slideUp();
  /* This will now animate to bring into view the selected one */
  $('div#' + $(this).data('content-id')).slideDown();
});

如果你愿意，你可以使用其他动画，或者只使用.show（）和.hide（）。

Basecamp样式游览页面 - jquery使用导航菜单替换div

1 个答案: