Basecamp Style Tour -Seite - JQuery Ersetzen Sie Divs mit NAV -Menü

Question

Ich versuche, eine Toureite auf meiner Website zu sprudeln, und ich liebe es, wie die Basecamp -Tour von 37Signals aussieht: http://basecamphq.com/tour/#/communicate

Ich gehe davon aus, dass sie JQuery oder ein anderes Äquivalent zum Austausch von Divs verwenden, aber ich bin ein totaler JQuery -Noob und bin mir nicht sicher, wie ich das tun soll.

Wenn jemand Vorschläge oder Ressourcen hat, auf die ich darauf hinweisen kann, wäre dies sehr geschätzt.

Prost!

Answer 1

Für jede Unterseite würden Sie Ihre Navigationslinks auf der Toureite haben, sie könnten so sein:

<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>

Beachten Sie das Attribut für Datenbekämpfung in den Links. Sie geben die ID des entsprechenden Div-Tags in diejenigen ein, um sie zu übereinstimmen.

Sie würden auch jede Ihrer Tour-Subseiten in ihrer eigenen DIV haben. Ihre Tourseite würde einen solchen Code enthalten:

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

Mit CSS können Sie alle Divs außer dem ersten verbergen. Dies würde in Ihrer CSS -Datei gehen:

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

Jetzt müssen Sie nur noch die Sichtbarkeit auf Klicken auf die Links mit JQuery wechseln:

$('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();
});

Sie können andere Animationen oder nur .show () und .hide () verwenden, wenn Sie möchten.