4

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...

auntialias
  • 107
  • 2
Deepak Kumar
  • 2,317
  • 5
  • 23
  • 21

2 Answers2

9
<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>
osyan
  • 1,784
  • 2
  • 25
  • 54
  • 1
    I would recommend using `` instead of the ` – Homunculus Reticulli Feb 04 '13 at 06:56
  • @HomunculusReticulli late but Done! :) – osyan Jan 12 '14 at 22:47
5

This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually. Check out Github.

Jordan Arsenault
  • 7,100
  • 8
  • 53
  • 96
Vincent Gabriel
  • 69
  • 1
  • 1