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 :

>live example


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.

demo


Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -