Question

在我的一个网页上，我有顶部的按钮，比如说A，B和C.

在它下面，我想在一个普通的DIV中显示不同的内容。显示的内容取决于单击哪个按钮。没有按钮可以或将被点击的顺序。

内容A，B和C中的每一个都是带有菜单选项，表单等的PHP驱动页面。表单可以部分填充，之后用户可以通过单击上面的一个按钮然后单击另一个按钮离开页面。按钮返回表单 - 我需要保留部分输入数据的值。

有人可以共享代码（或指向正确的方向）：

1）如何在最初加载页面时确保显示内容A？

2）如何定义页面？

到目前为止，我已经为要显示内容的区域定义了一个容器DIV。然后是三个DIV，其中三个php页面中的每一个都被加载。

我的问题是显示所有3个DIV，我可以上下滚动查看它们。

我可以处理2个DIV，但3个DIV挑战我。

提前谢谢。

乌塔姆

Answer 1

查看这个非常棒的jquery插件，它会为你的页面添加某种视差效果。

fullpage.js

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

Answer 2

布局

<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();
   });
});

一个DIV - 三个不同的内容

2 个答案: