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

~~你在tab中误解了data-toggle="tabe"。这应该有效：~~

~~＆GT; Live example~~

编辑：

您标签的选择器应为$('.nav.nav-pills').on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {});。 CSS正在运行，因为data-toggle值的更改而没有触发单击事件。

这样，它将按预期工作。

Demo

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

1 个答案: