滑动内容

Question

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

这是首页的样子：

因此，当用户单击注册链接时，我希望表单出现在此区域中：

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

我知道如何在jquery中完成所有onclick（显示/隐藏）的东西，但我想知道是否有一个好的插件我可以用来提供更平滑的过渡和更好的经验。或者，如果有更好的方法（纯CSS或其他）

Answer 1

只需将所有内容设置为.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>

使用jquery代码：

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

嗯，基本上就是这样。你可以完成剩下的工作，但这应该会给你一个正确的方向：）

您可以根据需要使其变得复杂。我有一些编码用CakePhp中的TabHelper来做这个，并且我用一些javascript构建了相同的。因为我不喜欢jQueryUi tab plugin（提示）

另外，看看Php Frameworks，你说你花了20个小时编写注册和登录的代码..好吧，我对CakePhp做了同样的事情，但现在我的网站已经完成了完全可维护，并在合适的时间发送电子邮件，并具有很多功能。