javascript - changing a header based on an unordered list's <li> list item's active class -

I am creating a multi-step form using jquery, but I wanted to adapt it a little bit to the top one Add header.

  & lt; Header & gt; Profile settings & lt; Div class = "wayfinder" & gt; & Lt; Ul id = "progress bar" & gt; & Lt; Li class = "active" & gt; Step 1 & lt; / Li & gt; & Lt; Li & gt; Step 2 & lt; / Li & gt; & Lt; Li & gt; Step 3 & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Header & gt;  

Fidel:

Can someone tell me when I can change the title (profile settings) in the next step? I think this list has to do with the active class of the item, but I can not understand what the first step is or is it a better solution?

It has been done in my Bela:

First of all, Wrapped inside an h1 tag, so I got a selection element In CSS, I changed header definition to header H1, match the new element structure. Then, I've added the following two rows in your previous and next functions:

  newHeadline = "profile step" + $ ("fieldset"). Index (next_fs); $ ("Header H1"). Html (newHeadline); NewHeadline = "Profile Step" + $ ("Field"). Index (previous_fs); $ ("Header H1"). Html (newHeadline);  

The value of the newHeadline will be the new title In my example, I use "Profile Step" with your form step index. But of course, it can really happen ...