javascript 基本 jquery 步骤向导
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17571457/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Basic jquery Steps Wizard
提问by Hyman Johnson
Been trying to do this for a while now, but it seems all jquery steps/wizard plugins are very limited and was hoping you guys are able to help me out a little.
尝试这样做已经有一段时间了，但似乎所有 jquery 步骤/向导插件都非常有限，希望你们能帮我一点忙。
What i'm trying to do is a very basic 3 steps wizard via jQuery. So at beginning it only shows the .step-active and .content-active at first and then 2 and then 3 where i submit the form.
我想要做的是一个非常基本的 3 步向导，通过 jQuery。所以一开始它只显示 .step-active 和 .content-active ，然后是我提交表单的 2 和 3。
Here is my HTML:
这是我的 HTML：
<div class="steps-wizard">
<div class="step1 step-active">1</div>
<div class="step2">2</div>
<div class="step3">3</div>
</div>
<form id="steps-form">
<div class="steps-content">
<!-- STEP 1 -->
<div class="step1-content content-active">
-- CONTENT --
<a href="#">Next</a>
</div>
<!-- STEP 2 -->
<div class="step2-content">
-- CONTENT --
<a href="#">Next</a>
</div>
<!-- STEP 3 -->
<div class="step3-content">
-- CONTENT --
<input type="submit">Submit</a>
</div>
Any help on this would be very much appreciated as it seems i'm not able to get this working correctly...
对此的任何帮助将不胜感激，因为我似乎无法正常工作...
Thanks guys!
多谢你们！
回答by Rafael Staib
Yes, it applies to many wizard plugins but not to jQuery Steps. jQuery Stepsis a very powerful and feature-rich wizard plugin. There are plenty of CSS classes you can use to customize the control like you want. Each step consists of one step button, a step title (which is hidden by default) and a step panel for the content. In your case you have to override just two CSS classes (see the following CSS snippet).
是的，它适用于许多向导插件，但不适用于jQuery Steps。jQuery Steps是一个非常强大且功能丰富的向导插件。您可以使用许多 CSS 类来根据需要自定义控件。每个步骤由一个步骤按钮、一个步骤标题（默认情况下隐藏）和一个内容的步骤面板组成。在您的情况下，您只需覆盖两个 CSS 类（请参阅以下 CSS 片段）。
/* First hide all steps from the begining on */
.wizard > .steps li
{
display: none;
}
/* Then just re-show only the current step */
.wizard > .steps li.current
{
display: block;
}
A running demo you find here.
您可以在此处找到正在运行的演示。
For more information and examples go here.
有关更多信息和示例，请访问此处。
For a more advanced form wizard implementation go here. There you will learn how to plug jQuery Stepsand jQuery Validationtogether.
如需更高级的表单向导实现，请访问此处。在那里，您将学习如何将jQuery Steps和jQuery Validation结合起来。
回答by vladkras
I used your HTML code. I added numbers to --CONTENT--to see what's going on, and added 2 lines of CSS to hide inactive <div>s, but I don't think you really need classes like step3-content.
我使用了你的 HTML 代码。我添加了数字以--CONTENT--查看发生了什么，并添加了 2 行 CSS 来隐藏不活动的<div>s，但我认为您真的不需要像step3-content.
$(document).ready(function() {
$('a').click(function(e) {
// this prevents page reload after clicking <a>
e.preventDefault();
// parent: exact <div> with <a> you just clicked, grandpa: all content <div>s, index: next <div> index
var parent = $(this).parent('div'), grandpa = $('.steps-content>div'), index = grandpa.index(parent)+1;
// remove active class from current <div>
parent.removeClass('content-active');
// set it to next div
grandpa.eq(index).addClass('content-active');
// another way to do the same, but using 1 line and children() instead of '>'
$('.steps-wizard').children('div').removeClass('step-active').eq(index).addClass('step-active');
});
// that's it
});
回答by NETCreator Hosting
I think you want something like this:
我想你想要这样的东西：
I hope this will help you.
我希望这能帮到您。
I have only made a simple tab plugin. It uses Jquery UI.
我只做了一个简单的标签插件。它使用 Jquery UI。
回答by Renato Vianna
I use JQuery plugin Smart Wizard and it works perfectly. The implementation is very simple. Follow the link to an example and documentation:
我使用 JQuery 插件智能向导，它运行良好。实现非常简单。按照示例和文档的链接：
