pagina del tour stile Basecamp - jQuery sostituire div usando il menu di navigazione

Question

Sto cercando di abete rosso su una pagina giro sul mio sito, e mi piace Basecamp sguardi giro il modo 37signals': http://basecamphq.com/tour/#/communicate

Presumo che usano Jquery o qualche altro equivalente a div di swap, ma io sono un noob totale jquery e non sono sicuro di come fare per questo.

Se qualcuno ha qualche suggerimento o le risorse per puntare a me per quanto riguarda questo, sarebbe molto apprezzato.

Cheers!

Answer 1

Si dovrebbe avere il vostro link di navigazione nella pagina tour per ogni pagina secondaria, che potrebbe essere simile a questo:

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

Si noti l'attributo data-content-id nei link, si mette l'ID del corrispondente tag div in quelle come un modo per abbinare in su.

Si avrebbe anche ciascuno dei vostri turistici "sub-pagine" nella propria div. La tua pagina tour sarebbe contenere codice in questo modo:

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

Utilizzando i CSS, si può poi nascondere tutto div del tranne il primo. Questo sarebbe andare nel vostro file CSS:

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

Ora è solo bisogno di cambiare la visibilità al clic dei collegamenti con 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();
});

È possibile utilizzare altre animazioni, o semplicemente .Show () e .nascosto () se si desidera ..