After creating a Wizard, I encountered a strange phenomenon. Advancing back and forth in the Wizard worked perfectly, but always marks only the currently active Bullet Point in the Wizard Progress List. That is strange because you would expect APEX to do that by default - it is seen happening always around the Application Builder itself, e.g. while creating a page or region. Read further if you want to see a solution consisting of only one simple line of code.
Following picture shows the highlighted Bullets if you use the default Wizard functionality.
You already advanced two steps, but neither Step 1 or Step 2 are hightlighted as you would expect. From the Application Builder you would rather anticipate following result.
Step 1 and Step 2 are already accomplished and are highlighted.
$('div.uHorizontalProgressList ul li:lt('+$('div.uHorizontalProgressList ul li.current, div.uHorizontalProgressList ul li.last-current').index()+') span').addClass('pastCurrent');
Thats it - you're done already - quick and easy, as I said ;-)
But what does it do? The jQuery selector is searching for the currently marked bullet (li.current, or if its the last one li.last-current). From there all Bullets in front of that are selected using a combination of index() and li:lt. The span-object inside every list-item get the CSS-class pastCurrent added, which is also used in the Application Builder itself.