Страница тура в стиле базового лагеря - jQuery заменить Divs с помощью Menu NAV
-
26-10-2019 - |
Вопрос
Я пытаюсь украсить турную страницу на моем сайте, и мне нравится, как смотрят тур 37Signals 'Basecamp: http://basecamphq.com/tour/#/communicate
Я предполагаю, что они используют jQuery или какой -то другой эквивалент обмена DIV, но я полная jquery Noob и не уверен, как это сделать.
Если у кого -то есть какие -либо предложения или ресурсы, чтобы указать мне на это, это будет очень ценится.
Ваше здоровье!
Решение
У вас будут ваши навигационные ссылки на странице тура для каждой субстраницы, они могут быть такими:
<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 (), если хотите ..