0

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

这是首页的样子： 形式

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

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

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

4

1 回答 1

2

只需将所有内容设置为并且.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，但现在我的网站已经完成并且完全可维护，并且在正确的时间发送电子邮件并且有很多的功能。

于 2012-09-21T19:05:02.713 回答