danjapro Posted September 2, 2014 Share Posted September 2, 2014 We are trying to get progress bar to place active class on the current page it one based on variable being set on page called "page", also the page is written into the <body class="page"> tag, once it is loading the page. It is not working as we need can anyone, help us with script below to set progress bar to do prev and next????? So variable is: var page = "refundstep1"; Body Class tage looks like: <body class="refunStep 1 main-layout"> Progress bar is: <div class="tabContent progress-bar hidden-phone"> <div class="step active"> <h2>Step 1: Enter your Pin</h2> </div> <div class="step inactive"> <h2>Step 2: Tell us your address</h2> </div> <div class="step inactive"> <h2>Step 3: Confirm Your Details</h2> </div> </div> Code to actual set the other list next as class="inactive", list passed or compelted as class="active done", Current page as class="active" var progressClass = $('.progress-bar div.step'); $(progressClass).addClass(function(index, activeClass) { var activeClass = 'done'; var activePage = 'active'; alert(page); var currentPage = page; var pageClass = $('body').hasClass(page); console.log(pageClass); if(pageClass === true) { progressClass.addClass(activePage); progressClass.prevAll().addClass(activeClass); //To select all next elements of `.progressClass` element: progressClass.nextAll().addClass(nopageClass); } return nopageClass; }); Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.