jquery - Breadcrumb navigation for all in one site -

I have a set of links that represent different parts of a page that I show and hide.

Here is the list of links:

    
 Their intention is that where the user is in the process  
 I would like to be able to make these links clickable so that they can be used for navigation purposes. .  
 However, the user should not be able to leave a step if they havent selected the relevant material in the previous step. And finally, once they have gone through all the necessary steps, I would like to do this so that they can go back and review their previous steps. At the moment, when you press the back button, all pages are default only on the page because all content is on the same page.  
 I thought that maybe in my "visible" sections, applying to my class is going to check the Jquery script and the if / else statement for the class and the link will work in the work, but it Will prove disabled.  
 Has anyone shed light on whether this? Maybe a SWITCH statement might be in order here?   
 
 
 If I understand correctly, then your three sections are a single page, and you hide them Or use javascript to show.  
 I also believe that you have some examples to validate user selection, for example  validate (stepNumber)  which is  true  or  False .  
 I suggest you add class "bread section" to "code">  link from sections, so you just change the steps each time you change the call, like one of the following To do:  
  var updateBreadcrumb = function () {$ ('a.bread-section'). Each (function (i) {$ (This) .toggleClass ('enabled', validatestep (i))}}   
 Then you can make a slight change in click actions on those links  
  var breadSectionClickAction = function (e) {e.preventDefault (); var $ self = $ (this); if (! $ Self.hasClass ('enabled')) return; // Your Show / Hide section Magic ShowSite ion ($ (a.bread section) .index ($ self)); // I think you have a specific section} $ ('a.bread-section') to show a The method is ('click', breadSectionClickAction);   
 and accordingly link the shell ी:   Pre-   .bread-section, .bread-section: hover, .bread-section: active {text-decoration: none; color: # 999;} .bread-section.enable {Text-decoration: underline; color: # 5555ee;} .bread-section. Enabled: Hover, .bread-section. Enabled: active {text-decoration: underline;}   
 me Hopefully, I understood exactly what you wanted;)