page tournée de style Basecamp - JQuery remplacer divs en utilisant le menu navigation
-
26-10-2019 - |
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!
La solution
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 ..