Страница тура в стиле базового лагеря - jQuery заменить Divs с помощью Menu NAV

Question

Я пытаюсь украсить турную страницу на моем сайте, и мне нравится, как смотрят тур 37Signals 'Basecamp: http://basecamphq.com/tour/#/communicate

Я предполагаю, что они используют jQuery или какой -то другой эквивалент обмена DIV, но я полная jquery Noob и не уверен, как это сделать.

Если у кого -то есть какие -либо предложения или ресурсы, чтобы указать мне на это, это будет очень ценится.

Ваше здоровье!

Answer 1

У вас будут ваши навигационные ссылки на странице тура для каждой субстраницы, они могут быть такими:

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

Обратите внимание на атрибут идентификатора данных в ссылках, вы помещаете идентификатор соответствующего тега DIV в их способ сопоставить их.

У вас также будет каждая из ваших туров «подпагин» в их собственном Div. Ваша страница тура будет содержать код, как это:

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

Используя CSS, вы можете скрыть все DIV, кроме первого. Это пойдет в вашем файле CSS:

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

Теперь вам просто нужно изменить видимость на щелчке ссылок с 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();
});

Вы можете использовать другие анимации или просто .show () и .hide (), если хотите ..