如何禁用導航選項卡引導選項卡

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表單向導。 我希望這可以幫助你。

$(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');
});