jquery - 带有自定义验证的 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