Basecamp Styleツアーページ-JQueryはNAVメニューを使用してDivを交換します
-
26-10-2019 - |
質問
私は自分のサイトでツアーページをスプルースしようとしています。37SignalsのBasecampツアーの見た目が大好きです。 http://basecamphq.com/tour/#/communicate
私は彼らがjqueryまたはSwap Divに相当する他のいくつかを使用していると思いますが、私は完全なjquery noobであり、これをどのように進めるかはわかりません。
誰かがこれについて私に指摘するための提案やリソースを持っているなら、それは大いに感謝されるでしょう。
乾杯!
解決
各サブページのツアーページにナビゲーションリンクがあります。それらは次のようなものかもしれません。
<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()を使用できます。
所属していません StackOverflow