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