Basecamp Styleツアーページ-JQueryはNAVメニューを使用してDivを交換します

Question

私は自分のサイトでツアーページをスプルースしようとしています。37SignalsのBasecampツアーの見た目が大好きです。 http://basecamphq.com/tour/#/communicate

私は彼らがjqueryまたはSwap Divに相当する他のいくつかを使用していると思いますが、私は完全なjquery noobであり、これをどのように進めるかはわかりません。

誰かがこれについて私に指摘するための提案やリソースを持っているなら、それは大いに感謝されるでしょう。

乾杯！

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>

リンク内のデータコンテンツ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以外のすべての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（）を使用できます。