Question

I’m building a multi-step form in jQuery which updates the URL according to which segment of the form it’s currently showing.

eg:

• index.php#form=step1
• index.php#form=step2
• index.php#form=step3

I’ve also built a breadcrumb menu that links to each of these segments but I need to somehow add an “active” class to the breadcrumb item that is currently being shown. Not sure how I should do this but I figured maybe finding out what the value of #form is and if that value matches the id of the breadcrumb item, then update its class to active?

eg:

if form = step1 
breadcrumbItem addClass "active"

if form = step2 
breadcrumbItem addClass "active"

etc

Answer 1

I’d suggest using:

var url = document.location.href;
var step;
if (url.indexOf('=') > -1){
    step = url.split('=')[1];
}

document.getElementById(step).className = 'active';

JS Fiddle demonstration of concept.

The above assumes that the breadcrumb items have ids such as step1, step2 and so on.

Also in the demo, I’m explicitly assigning a string to the variable url, this is because of the way that JS Fiddle works. In your page use, as in the code above, var url = document.location.href.