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

Question

I have an application form under TAB A. I have also other tabs other than TAB A.So as i fill up the form, the other tabs are disabled, after filling up the form, the next tab becomes active and the previous tab, while the other tabs are still disabled. how am i gonna achieve this? Help me please :)

<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

So basically you need a Bootstrap form wizard. I hope this could help you.

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