page tournée de style Basecamp - JQuery remplacer divs en utilisant le menu navigation

Question

Je suis en train d'embellir une page tournée sur mon site, et j'adore la tournée 37signals façon Basecamp regards: http://basecamphq.com/tour/#/communicate

Je suppose qu'ils utilisent Jquery ou un autre équivalent à divs d'échange, mais je suis un noob total jquery et ne suis pas sûr de savoir comment s'y prendre.

Si quelqu'un a des suggestions ou des ressources pour me indiquer à ce sujet, il serait très apprécié.

Vive!

Answer 1

Vous auriez vos liens de navigation sur la page tournée pour chaque sous-page, ils pourraient ressembler à ceci:

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

Notez l'attribut data-content-id dans les liens, vous mettez l'ID du correspondant div balise dans ceux comme un moyen de les faire correspondre.

Vous auriez également chacun de vos voyages « sous-pages » dans leur propre div. Votre page tournée contiendra le code comme ceci:

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

L'utilisation de CSS, vous pouvez cacher tout div de l'exception du premier. Cela irait dans votre fichier CSS:

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

Maintenant, il vous suffit de changer la visibilité sur clic des liens avec 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();
});

Vous pouvez utiliser d'autres animations, ou tout simplement .Show () et .hide () si vous voulez ..