Question

现在尝试这样做了一段时间，但似乎所有jquery步骤/向导插件都非常有限，希望你们能够帮助我一点点。

我想要做的是通过jQuery提供一个非常基本的3步骤向导。所以一开始它只显示.step-active和.content-active，然后是2，然后是3，我提交表单。

这是我的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>

对此的任何帮助都会非常感激，因为我似乎无法使其正常工作......

谢谢你们！

Answer 1

是的，它适用于许多向导插件，但不适用于 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;
}

您找到here的正在运行的演示。

有关更多信息和示例，请转到here。

要获得更高级的表单向导，请转到here。在那里，您将学习如何一起插入 jQuery Steps 和 jQuery Validation 。

Answer 2

我使用了您的HTML代码。我在--CONTENT--添加了数字以查看发生了什么，并添加了两行CSS来隐藏不活动的<div>，但我认为你真的不需要像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
});

Answer 3

我想你想要这样的东西：

http://jsbin.com/egidod/1/

我希望这会对你有所帮助。

我只制作了一个简单的标签插件。它使用Jquery UI。

Answer 4

我使用JQuery插件智能向导，它完美无缺。实施非常简单。点击示例和文档的链接：

https://github.com/mstratman/jQuery-Smart-Wizard

基本jquery步骤向导

4 个答案: