Страница тура в стиле базового лагеря - jquery заменяет divs с помощью навигационного меню

#jquery #ruby-on-rails #37-signals

#jquery #ruby-on-rails #37-сигналы

Вопрос:

Я пытаюсь украсить страницу тура на своем сайте, и мне нравится, как выглядит базовый тур 37signals: http://basecamphq.com/tour/#/communicate

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

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

Приветствия!

Ответ №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>

Обратите внимание на атрибут data-content-id в ссылках, вы добавляете в них идентификатор соответствующего тега 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(), если хотите..