Jquery 带引导选项卡的条件导航？

我有一个多页表单，用户使用Boostrap选项卡在页面之间导航。我想使选项卡有条件，这样，如果数据有问题，他们就不能将选项卡转到另一个页面。所以实际上我想截取导航，检查有效性，然后如果确定，让导航继续。我曾尝试将单击处理程序与event.preventDefault一起使用，该处理程序运行，但仍会出现制表符。我想做我想做的事情一定很简单，但我无法让它工作。

做相反的事情：

默认情况下，禁用除第一个选项卡以外的所有选项卡（

class=“disabled”

）

使用JavaScript/jQuery动态执行数据验证（因为数据由用户完成）

如果验证规则通过，则启用其他选项卡（删除禁用的

类）

做相反的事：

默认情况下，禁用除第一个选项卡以外的所有选项卡（

class=“disabled”

）

使用JavaScript/jQuery动态执行数据验证（因为数据由用户完成）

如果验证规则通过，则启用其他选项卡（删除禁用的

类）

---

与@bostaf建议的类似，您可以这样做

// disable all tabs
$('[data-toggle=tab]').click(function () {
  return false;}
).addClass("text-muted");

var validated = function(tab){
  tab.unbind('click').removeClass('text-muted');
}

//validate inputs on click of button
$('.btn-ok').click(function(){

    var allValid = true;
    // get each input in this tab pane and validate
    $(this).parents('.tab-pane').find('.form-control').each(function(i,e){

        // add some condition(s) to validate each input
        if (valid){
            // validation passed
            allValid = true;
        } else {
            // validation failed
            allValid = false;
        }

    });

    if (allValid) {
        var tabIndex = $(this).parents('.tab-pane').index();
        validated($('[data-toggle]').eq(tabIndex+1));
    }

});

---

与@bostaf建议的类似，您可以这样做

// disable all tabs
$('[data-toggle=tab]').click(function () {
  return false;}
).addClass("text-muted");

var validated = function(tab){
  tab.unbind('click').removeClass('text-muted');
}

//validate inputs on click of button
$('.btn-ok').click(function(){

    var allValid = true;
    // get each input in this tab pane and validate
    $(this).parents('.tab-pane').find('.form-control').each(function(i,e){

        // add some condition(s) to validate each input
        if (valid){
            // validation passed
            allValid = true;
        } else {
            // validation failed
            allValid = false;
        }

    });

    if (allValid) {
        var tabIndex = $(this).parents('.tab-pane').index();
        validated($('[data-toggle]').eq(tabIndex+1));
    }

});

---

发布您尝试发布的代码。发布您尝试发布的代码。我最终使用了这种技术的一种变体，即在验证成功后动态添加导航。@johnmore Cool。然而，从用户的角度来看，我总是更喜欢提前查看工作流步骤，即使它们已被禁用。我认为这是最常见的设计，看看不同的购物服务，等等。。。您总是可以看到步骤的数量：1。购买,2。送货，3号，账单，4号。确认书他们没有对你隐瞒，这背后有一个很好的理由。我在那里表达得不好。我的意思是动态启用而不是添加导航。这些选项卡都是可见的，它们只是在安全离开页面之前不起作用。我最终使用了这种技术的一种变体，即在验证成功后动态添加导航。@johnmore Cool。然而，从用户的角度来看，我总是更喜欢提前查看工作流步骤，即使它们已被禁用。我认为这是最常见的设计，看看不同的购物服务，等等。。。您总是可以看到步骤的数量：1。购买,2。送货，3号，账单，4号。确认书他们没有对你隐瞒，这背后有一个很好的理由。我在那里表达得不好。我的意思是动态启用而不是添加导航。这些选项卡都是可见的，它们只是在安全离开页面之前不起作用。