Question

我正在使用以下示例： http://tympanus.net/codrops/2010/06/07/fancy-sliding-form-with-jquery/

我希望能够将参数发送到一个函数，我决定哪个选项卡是最后一个。举例来说，如果我在标签3上点击标签4，它将从3变为4而不是现在的1到4。

我已经创建了一个函数，我决定从哪个标签开始，以便完成所有操作。但是，我现在尝试摆弄变量几个小时，我无法弄明白。我是javascript的新手，所以我现在很难过。想要一些帮助！

非常感谢！

HTML：

<div id="content" style="margin-top:50px;">
    <div id="wrapper">
        <div id="steps">
            <fieldset class="step">
                <legend>www.ww.www</legend>
                @Html.Partial("~/Views/Folder/_Home.cshtml")
            </fieldset>
            <fieldset class="step">
                <legend>Tab1></legend>
                @Html.Partial("~/Views/Folder/_view1.cshtml")
            </fieldset>

            <fieldset class="step">
                <legend>Tab2</legend>
                @Html.Partial("~/Views/Folder/_view2.cshtml")
            </fieldset>

            <fieldset class="step">
                <legend>Tab3</legend>
                @Html.Partial("~/Views/Forgot/_view3.cshtml")
            </fieldset>
        </div>
        <div id="navigation" style="display:none;">
            <ul>
                <li class="selected">
                    <a href="#" id="option1">Tab1</a>
                </li>
                <li>
                    <a href="#" id="option2">Tab2</a>
                </li>
                <li>
                    <a href="#" id="option3">Tab3</a>
                </li>
                <li>
                    <a href="#" id="option4">Tab4</a>
                </li>
            </ul>
        </div>
    </div>
</div>

激活特定标签的脚本：

<script>
    $(function () {
        var steps = jQuery("#option4");
        steps.click();
    })
</script>

这将选择最后一个标签。

标签的代码:(不是全部，只是重要部分）

$（function（）{ / * 字段集的数量 * / var fieldsetCount = $（＆＃39;＃formElem＆＃39;）。children（）。length;

/*
current position of fieldset / navigation link
*/
var current = 1;

/*
sum and save the widths of each one of the fieldsets
set the final sum as the total width of the steps element
*/
var stepsWidth = 0;
var widths = new Array();
$('#steps .step').each(function (i) {
    var $step = $(this);
    widths[i] = stepsWidth;
    stepsWidth += $step.width();
});
$('#steps').width(stepsWidth);

/*
to avoid problems in IE, focus the first input of the form
*/
$('#formElem').children(':first').find(':input:first').focus();

/*
show the navigation bar
*/
$('#navigation').show();

/*
when clicking on a navigation link 
the form slides to the corresponding fieldset
*/
$('#navigation a').bind('click', function (e) {
    var $this = $(this);
    var prev = current;
    $this.closest('ul').find('li').removeClass('selected');
    $this.parent().addClass('selected');
    /*
    we store the position of the link
    in the current variable 
    */
    current = $this.parent().index() + 1;
    /*
    animate / slide to the next or to the corresponding
    fieldset. The order of the links in the navigation
    is the order of the fieldsets.
    Also, after sliding, we trigger the focus on the first 
    input element of the new fieldset
    If we clicked on the last link (confirmation), then we validate
    all the fieldsets, otherwise we validate the previous one
    before the form slided
    */
    $('#steps').stop().animate({
        marginLeft: '-' + widths[current - 1] + 'px'
    }, 500, function () {
        $('#formElem').children(':nth-child(' + parseInt(current) + ')').find(':input:first').focus();
    });
    e.preventDefault();
});

它与链接中的代码相同，如果难以阅读，请查看它:)谢谢

Answer 1

好的 - 这是一个解决方案

如果您查看html中的#steps元素，您会注意到在选择导航项时，它每次都会将margin-left属性更改为-600pxs。

所以你需要做的就是根据你想要的菜单项来更新它。

$('#steps').css( { "margin-left" : "-1800px" });

然后您只需要更新所选导航项的类，以便正确设置样式

$('#navigation ul li').removeClass('selected');
$('#navigation ul li').eq(3).addClass('selected');

这是一个更新的JSFiddle，其中包含您需要的代码 - http://jsfiddle.net/gV5de/1/

希望这有助于你

使用jQuery调整的MVC滑动窗体（链接到示例）

1 个答案: