How to make twitter bootstrap tab as form wizard?

Question

In my freemarker page I am creating 4 tabs. What I want: If user is in 4th tab, only then can he see the submit button. When he is in 1st, 2nd or 3rd tab he can see next and previous button. How do I create active next or previous tab on button click using jquery or javascript? Any one please help...

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#declarations1" data-toggle="tab">Declarations</a></li>
        <li><a href="#hradetails1" data-toggle="tab">HRA Details</a></li>
        <#if IsHidePrevEmpITDeclaration?exists && IsHidePrevEmpITDeclaration != "true">
        <li><a href="#preEmpSalary1" data-toggle="tab">Previous Employment Salary</a></li>
        </#if>
        <li><a href="#otherIncome1" data-toggle="tab">Other Income</a></li>
    </ul>
</div>

thanks in advance...

Answer 1

<div class="tabbable columns">
    <ul id="myTab" class="nav nav-tabs">
        <li class="active"><a id="n.1" href="#declarations1" data-toggle="tab"> Declarations </a></li>
        <li class=""><a id="n.2" href="#hradetails1" data-toggle="tab">HRA Details</a></li>
        <li class=""> <a id="n.3" href="#preEmpSalary1" data-toggle="tab">Previous Employment Salary</a></li>
        <li><a id="n.4" href="#otherIncome1" data-toggle="tab">Other Income</a></li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade active in" id="declarations1">
            <p>The first content</p>
           <input type="button" onclick="document.getElementById('n.2').click()" value="Next" />
        </div>
        <div class="tab-pane fade" id="hradetails1">
            <p>The 2nd content</p>
            <input type="button" onclick="document.getElementById('n.3').click()" value="Next" />
            <input type="button" onclick="document.getElementById('n.1').click()" value="Previous" />
        </div>
        <div class="tab-pane fade" id="preEmpSalary1">
            <p>The 3rd content</p>
            <input type="button" onclick="document.getElementById('n.4').click()" value="Next" />
            <input type="button" onclick="document.getElementById('n.2').click()" value="Previous" />
        </div>
        <div class="tab-pane fade" id="otherIncome1">
            <p>The 4th content</p>
            <input type="submit" value="submit" />
        </div>
    </div>
</div>