如何使Twitter Bootstrap选项卡作为表单向导? [英] How to make twitter bootstrap tab as form wizard?

问题描述

在我的免费标记页面中，我正在创建4个标签.我想要的是:如果用户位于第四个选项卡中，则只有他才能看到提交"按钮.当他处于第一，第二或第三选项卡时，他可以看到下一个和上一个按钮.如何使用jquery或javascript在按钮单击上创建活动的下一个或上一个选项卡?任何人都可以帮助...

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>

提前谢谢...

推荐答案

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

这篇关于如何使Twitter Bootstrap选项卡作为表单向导?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！