один DIV - три различных содержания

Question

На одном из моих веб-страниц, у меня есть кнопки в верхней части, скажем, A, B и C.

Под ним, я хотел бы показать изменяющееся содержание в общей DIV. То, что отображается, определяется тем, какая кнопка нажата. Нет порядка, в котором кнопки могут или будут нажаты.

Каждый из материалов A, B и C представляет собой страницы, управляемые php, с опциями меню, формами и т. Д. Формы могут быть частично заполнены, после чего Пользователь может перейти от страницы, нажав одну из указанных кнопок, а затем щелкнуть другую кнопку, чтобы вернуться к форме - мне нужно сохранить значения частично введенных данных.

Может кто-то код доли (или мне точку в правильном направлении), где:

1) Как обеспечить отображается, что содержание А когда страница первоначально загружается?

2) Как я могу определить страницу?

До сих пор я определил контейнер DIV для области, где должно отображаться содержимое. И после этого три DIV, где загружается каждая из трех страниц php.

Моя проблема заключается в том, что отображаются все 3 DIVs, и я могу просматривать их вверх и вниз.

Я могу обрабатывать 2 DIVs, но 3 DIVs бросают вызов мне.

Заранее спасибо.

Uttam

Answer 1

Компоновка

<button class="toggleButton" data-target="div1">A</button> 
<button class="toggleButton" data-target="div2">B</button> 
<button class="toggleButton" data-target="div3">C</button> 

<div id="div1" class="toggleDiv"> 
    Content A 
</div> 

<div id="div2" class="toggleDiv" style="display:none"> 
    Content B 
</div> 

<div id="div3" class="toggleDiv" style="display:none"> 
    Content C 
</div> 

Код JavaScript:

$(function(){ 

    $('.toggleButton').click(function(){ 

     var target = $('#' + $(this).attr('data-target')); 
     $('.toggleDiv').not(target).hide(); 
     target.show(); 
    }); 
}); 

Answer 2

Заканчивать этот удивительный JQuery плагин, который добавит какой-то эффект параллакса на свою страницу.

fullpage.js

http://alvarotrigo.com/fullPage/#4thpage