Setting `a href` elements dynamically

Question

I have two buttons that are essentially "next" and "previous" buttons for my tabbed form with bootstrap. The code works when you go from the introduction tab to the applicant tab just fine the way it is. The only problem is there are 11 "tabs" in the element. I am needing essential parts in this <a> to change on each tab.

What I am needing to change is the href , .style.width , and the two classNames at the end of the `onclick' function each time the user progresses through the form.

<a href="" data-toggle="tab" class="btn btn-primary pull-left hide" onclick="document.getElementById('progressBar').style.width='20%'; document.getElementById('applicantTab').className='active'; document.getElementById('introductionTab').className='';">Previous</a>

<a href="#applicant" data-toggle="tab" class="btn btn-primary pull-right" onclick="document.getElementById('progressBar').style.width='20%'; document.getElementById('applicantTab').className='active'; document.getElementById('introductionTab').className='';">Next</a>

The sections that need to correspond with the buttons are identified with an id that is different for all 11 sections.

<div class="tab-pane" id="confirmation">

So for example when the users clicks the button "next" from the introduction tab I need the above to change to: (and vise versa for the previous button)

<a href="#introduction" data-toggle="tab" class="btn btn-primary pull-left" onclick="document.getElementById('progressBar').style.width='10%'; document.getElementById('introductionTab').className='active'; document.getElementById('applicantTab').className='';">Previous</a>

<a href="#applicant" data-toggle="tab" class="btn btn-primary pull-right" onclick="document.getElementById('progressBar').style.width='20%'; document.getElementById('applicantTab').className='active'; document.getElementById('introductionTab').className='';">Next</a>

and so on throughout the tab-panes.

I am figuring I could do something like, I just really don't know how to start it and how to change just the specific onclick elements like I am needing to.

if(this tab-pane is something?) 
{
   document.getelementById('previous').href=""; 
   document.getelementById('previous').style.width="";
   document.getelementById('previous').className="";
}

As Requested in the comments the tabs are laid out like so:

<div class="tab-content"> 
  <div class="tab-pane" id="introduction"> 
    //content here 
  </div> 
  <div class="tab-pane" id="applicant">  //and so on just like this for all 11 tabs.
    //content here
  </div>
</div>

Answer 1

Here you go... This is using Twitter bootstrap and Jquery... Hopefully its helpful to you... The progress bar is a bit of a hack, but its a start and Im sure you can figure things out from there...

The only thing that sucks is that the tabs are clickable, and that isn't what you wanted, since you want them to progress through the form without being able to click on the tabs....But the nuts and bolts are here

DEMO HERE

$(document).ready(function(){

  //Progress bar calculation
  function setProgress(){
    var length = $tabs.length;
    var index = ($('li').index($(".active")))+1;
    var width = (index/length)*100;
    $('#progressBar').css('width', width+'%');
  }

   var $tabs = $('#tab_bar li');
   setProgress();

   $('#prevtab').on('click', function () {
     $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
     setProgress();
   });

   $('#nexttab').on('click', function () {
     $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
     setProgress();
   });

   $tabs.click(function () {
    setTimeout(setProgress, 200)
   });

});

Then your HTML, I dunno what you had for < ul > , cuz you didn't provide that part... so I just hacked something up...but this should be similar to your structure

    <ul class="nav nav-tabs" id="tab_bar">
      <li class="active"><a href="#introduction" data-toggle="tab">Intro</a></li>
      <li><a href="#secondtab" data-toggle="tab">SecondTab</a></li>
      <li><a href="#thirdtab" data-toggle="tab">Third</a></li>
      <li><a href="#fourthtab" data-toggle="tab">Fourth</a></li>
    </ul>    


 <div class="tab-content"> 

    <div class="tab-pane" id="introduction"> 
      asdasdasdas
    </div> 

    <div class="tab-pane" id="secondtab"> 
      asdasdsagreteryterythhgh
    </div> 

    <div class="tab-pane" id="thirdtab"> 
      rthrthrthrthrt
    </div> 

    <div class="tab-pane" id="fourthtab"> 
      yujghjuyjyujedgjhegj
    </div>

</div>


  <a class="btn" id="prevtab" type="button">Prev</button>
  <a class="btn" id="nexttab" type="button">Next</button>

DEMO HERE