Страница тура в стиле Basecamp - jquery заменяет div, используя навигационное меню - PullRequest
Новая
       200

Страница тура в стиле Basecamp - jquery заменяет div, используя навигационное меню

0 голосов
/ 19 октября 2011

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

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

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

Ура!

1 Ответ

0 голосов
/ 19 октября 2011

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

<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 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 (), если хотите ..

...