Página de tour de estilo Basecamp - JQuery Reemplazar Divs usando el menú de Nav

Question

Estoy tratando de arreglar una página de gira en mi sitio, y me encanta la forma en que se ve la gira Basecamp Signals 37S: http://basecamphq.com/tour/#/communicate

Supongo que usan jQuery o algún otro equivalente para intercambiar divs, pero soy un noob de jQuery total y no estoy seguro de cómo hacerlo.

Si alguien tiene alguna sugerencia o recurso para señalarme con respecto a esto, sería muy apreciado.

¡Salud!

Answer 1

Tendría sus enlaces de navegación en la página del recorrido para cada subpágina, podrían ser así:

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

Observe el atributo de ID-Content-Content en los enlaces, coloca la ID de la etiqueta DIV correspondiente en aquellos como una forma de igualarlos.

También tendrá cada una de sus "subpáginas" de Tour en su propia div. Su página de Tour contendría un código como este:

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

Usando CSS, puede ocultar todos los DIV excepto el primero. Esto iría en su archivo CSS:

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

Ahora solo necesita cambiar la visibilidad al hacer clic en los enlaces 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();
});

Puede usar otras animaciones, o simplemente .show () y .Hide () si lo desea.