在我的一个网页上,我在顶部有按钮,比如A、B和C。
在它下面,我想在一个通用的DIV中显示不同的内容。显示什么取决于单击了哪个按钮。没有可以或将要单击按钮的顺序。
内容A、B和C中的每一个都是php驱动的页面,具有菜单选项、表单等。表单可以部分填充,之后用户可以通过单击上面的一个按钮,然后单击另一个按钮返回表单,从而离开页面-我需要保留部分输入数据的值。
有人能分享代码吗(或者给我指正确的方向)在哪里:
1) 如何确保在最初加载页面时显示内容A?
2) 如何定义页面?
到目前为止,我已经为要显示内容的区域定义了一个容器DIV。然后加载三个php页面中的每一个的三个DIV。
我的问题是,所有3个DIV都显示出来了,我可以上下滚动查看它们。
我可以处理2个DIV,但3个DIV挑战我。
提前谢谢。
Uttam
看看这个很棒的jquery插件,它会给你的页面添加一些视差效果。
fullpage.js
http://alvarotrigo.com/fullPage/#4thpage
布局
<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();
});
});