一个DIV-三个不同的内容

One DIV - three different contents

本文关键字：三个 DIV- 一个      更新时间：2023-09-26

在我的一个网页上，我在顶部有按钮，比如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();
   });
});
相关文章：