0

私は自分のサイトのツアーページを整えようとしています。37signalsのBasecampツアーの見た目が気に入っています：http：//basecamphq.com/tour/#/communicate

私は彼らがJqueryまたはスワップdivに相当する他の何かを使用していると思いますが、私は完全なjquery noobであり、これをどうやって行うのかわかりません。

誰かがこれに関して私に指摘する提案やリソースを持っているなら、それは大いにありがたいです。

乾杯！

4

1 に答える 1

0

各サブページのツアーページにナビゲーションリンクがあり、次のようになります。

<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を除くすべての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（）だけを使用することもできます。

于 2011-10-19T03:39:57.463 に答える