Bootstrap 带有自定义验证的进度条

Question

我试图仅在轻微验证后激活进度条的选项卡。但是，进度条的CSS%属性没有变化。这是我的 Javascript 相关代码和 working code on FIDDLE:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

    console.log("here");
    //update progress
    var step = $(e.target).data('step');
    var percent = (parseInt(step) / 4) * 100;

    $('.progress-bar').css({width: percent + '%'});
    $('.progress-bar').text(percent + '%');

    //e.relatedTarget // previous tab

})
$('#page-wrapper').on('click', '#to-tab-2', function(e) {
    e.preventDefault();

        $('ul.nav-pills li a[data-step="2"]').attr({
            "href": "#step2",
            "data-toggle": "tab"
        });
        $('a[href="#step2"]').parent().removeClass('disabled')
        $('a[href="#step2"]').click();
});

Answer 1

~~您在 data-toggle="tabe" 中拼错了 tab。这应该有效：~~

~~>Live example~~

编辑：

您的选项卡选择器应该是 $('.nav.nav-pills').on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {});。 CSS 有效，只是点击事件不会因为 data-toggle 值的变化而触发。

这样，它将按预期工作。

Demo

Bootstrap 带有自定义验证的进度条

Bootstrap Progress bar with custom validation

css

jquery

twitter-bootstrap

twitter-bootstrap-3