jquery - Basecamp 风格的游览页面 - jquery 使用导航菜单替换 div

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() ..