jquery - Bootstrap Progress bar with custom validation -
i'm trying activate tabs of progress bar after slight validations. however, css % property of progress bar fails change. here javascript relevant code , 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(); });
you mispelled tab
in data-toggle="tabe"
. should work :
edit :
your selector tabs should $('.nav.nav-pills').on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {});
. css working, click event isn't triggered because of change of data-toggle
value.
this way, work intended.