Question

我在TAB A下有一个申请表。我还有其他标签而不是TAB A.所以我填写表格，其他标签被禁用，填写表格后，下一个标签变为活动状态选项卡，而其他选项卡仍然禁用。我怎么会这样做？请帮帮我:)

<ul class="nav nav-tabs">
    <li class="active"><a id="a" href="${pageContext.request.contextPath}/employee/details/A">TAB A</a></li>
    <li><a id="b" href="${pageContext.request.contextPath}/employee/details/B">TAB B</a></li>
    <li><a id="c" href="${pageContext.request.contextPath}/employee/details/C">TAB C</a></li>
    <li><a id="d" href="${pageContext.request.contextPath}/employee/details/D">TAB D</a></li>
</ul>

Answer 1

所以基本上你需要一个Bootstrap表单向导。我希望this可以帮助你。

$(document).ready(function () {

    var navListItems = $('div.setup-panel div a'),
        allWells = $('.setup-content'),
        allNextBtn = $('.nextBtn');

    allWells.hide();

    navListItems.click(function (e) {
        e.preventDefault();
        var $target = $($(this).attr('href')),
            $item = $(this);

        if (!$item.hasClass('disabled')) {
            navListItems.removeClass('btn-success').addClass('btn-default');
            $item.addClass('btn-success');
            allWells.hide();
            $target.show();
            $target.find('input:eq(0)').focus();
        }
    });

    allNextBtn.click(function () {
        var curStep = $(this).closest(".setup-content"),
            curStepBtn = curStep.attr("id"),
            nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
            curInputs = curStep.find("input[type='text'],input[type='url']"),
            isValid = true;

        $(".form-group").removeClass("has-error");
        for (var i = 0; i < curInputs.length; i++) {
            if (!curInputs[i].validity.valid) {
                isValid = false;
                $(curInputs[i]).closest(".form-group").addClass("has-error");
            }
        }

        if (isValid) nextStepWizard.removeAttr('disabled').trigger('click');
    });

    $('div.setup-panel div a.btn-success').trigger('click');
});

如何禁用导航标签引导选项卡

1 个答案: