1

一直在尝试这样做一段时间,但似乎所有 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>

对此的任何帮助将不胜感激,因为我似乎无法正常工作......

多谢你们!

4

4 回答 4

3

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

您可以在此处找到一个正在运行的演示。

如需更多信息和示例,请访问此处

如需更高级的表单向导实现,请访问此处。在那里,您将学习如何将jQuery StepsjQuery Validation连接在一起。

于 2013-09-23T11:41:28.290 回答
1

我使用了你的 HTML 代码。我添加了数字以--CONTENT--查看发生了什么,并添加了 2 行 CSS 来隐藏 inactive <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
});
于 2013-07-10T13:42:35.537 回答
0

我使用 JQuery 插件智能向导,它工作得很好。实现非常简单。按照示例和文档的链接:

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

于 2013-09-24T13:13:35.170 回答
0

我想你想要这样的东西:

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

我希望这能帮到您。

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

于 2013-07-10T13:33:49.453 回答