Php 滑动表单内容

因此，我有一个3页（Page1.php、Page2.php、Page3.php）的注册页面，经过20多个小时的编码后全部完成。但现在我在做设计。我的想法是将所有表单放在一个页面上，而不是放在三个不同的页面上（Page1.php、Page2.php、Page3.php）

以下是头版的内容：

因此，当用户单击register链接时，我希望表单显示在此区域：

我有表单的所有代码，所以这只是一个简单的复制粘贴问题。但我需要做的是为表单实现某种滑块。因此，用户单击register，表单显示在右侧，他们填写第一页，然后在右下角单击continue，然后滑到下一页。请注意，当他们单击“继续”时，我不想转到一个全新的页面，我想停留在同一页面上，我只想显示不同的内容

---

我知道如何在jquery中执行所有onclick（show/hide）操作，但我想知道是否有一个好的插件可以用来提供更平滑的转换和更好的体验。或者如果有更好的方法（纯CSS或其他什么）

只需将所有内容设置为

.hide（）

和

.show（）

具有唯一标识符的

div

所以你有：

<a href="javascript:void();" data-tab="page1" class="tab">Page 1</a>
<a href="javascript:void();" data-tab="page2" class="tab">Page 2</a>
<a href="javascript:void();" data-tab="page3" class="tab">Page 3</a>
<div class="tab" data-tab="page1">Content for page 1</div>
<div class="tab" data-tab="page1">Content for page 1</div>
<div class="tab" data-tab="page1">Content for page 1</div>

嗯，基本上就是这样。您可以完成其余的工作，但这应该会让您朝着正确的方向开始：）

你可以随心所欲地把它复杂化。我用CakePhp中的TabHelper编写了一些代码，我用一点javascript构建了同样的代码。因为我不喜欢

jQueryUi选项卡插件

（提示）

---

另外，看看

Php框架

，你说你花了20个小时为注册和登录编写代码。。嗯，我对

CakePhp

也做了同样的操作，但是现在我的网站已经完成了，可以完全维护，可以在正确的时间发送电子邮件，并且有很多功能。

当然可以搜索jQuery slider插件，有几个插件可以帮你包装它up@thewebguy好的，但是jquery滑块插件提供了图像滑块。我想把这张表格滑动一下。是否有更具体的插件名称？仅使用css是不可能的。因为它不会记住事物的状态。您有像

：hover

和

：click

这样的选择器，但没有任何东西能记住您单击的内容。例如，您单击第2页，您可以显示第2页，但它将在

mouseUp

事件之后立即消失。

$('a.tab').click(function(){
    $('div.tab').hide();
    $('div.tab[data-tab=' + $(this).attr('data-tab') + ']').show();
});