如何将 Twitter Bootstrap 选项卡制作为表单向导?

2024-01-12

在我的 freemarker 页面中,我创建了 4 个选项卡。我想要的:如果用户位于第四个选项卡中,只有这样他才能看到提交按钮。当他位于第一个、第二个或第三个选项卡时,他可以看到下一个和上一个按钮。如何使用 jquery 或 javascript 在按钮单击时创建活动的下一个或上一个选项卡?请任何人帮忙...

<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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将 Twitter Bootstrap 选项卡制作为表单向导? 的相关文章

  • AngularJS - 在等待数据/数据计算时加载图标

    我有一个简单的 Angular http get app factory countriesService function http return getCountryData function done http get resourc
  • Jquery 子元素发生变化

    我正在尝试使用 jquery 在子元素 在本例中为 select 更改时触发事件 这是我的 HTML div class row addForm div class col lg 2 col md 2 col sm 3 col xs 6 d
  • Firefox 上的 jquery 焦点未设置

    我想将焦点设置到我的文本区域 以下是我的代码 this textInput val show focus 但它不起作用 实际上 当我按下鼠标按钮时 它会出现 但是当我松开鼠标时 它会从文本区域中删除 因此 经过大量搜索后 我发现 setTi
  • Ajax 函数在重定向后不保存滚动位置

    正如标题所述 我编写了一个 ajax 函数 该函数应该滚动到用户在重定向之前所在的位置 我写了一个alert对于测试场景 它确实触发了 但滚动不断回到顶部 我在这里做错了什么 JavaScript ajax type GET url Adm
  • Fancybox 只能水平响应高内容吗?

    我有一个网站 其中有一些非常高的图像 我希望这些图像能够以响应方式水平响应 但不能垂直响应 如果它们符合浏览器的高度 它们就会变得太小而无法正确查看 有没有一种简单的方法可以实现我所缺少的 请参阅下面的示例 单击第二个缩略图 bswift
  • 在选择 tr 来覆盖父 div 上的第 n 个子类时,如何使用 jquery addClass ?

    我用它来选择一个 tr 当单击它来更改 tr 的颜色时 tr click function this addClass selected siblings removeClass selected 参见小提琴http jsfiddle ne
  • 通过 jQuery Ajax 发送多个表单数据

    我有两个表单 我想通过 jQuery Ajax 调用发送数据 我成功发送了一种表单 但无法通过同一个 Ajax 调用发送这两种表单的数据 我的表格是
  • setInterval 和 Internet Explorer

    我已经上下搜索 但尚未找到允许 setInterval 在任何版本的 Internet Explorer 中工作的东西 下面是我现在正在使用的代码 div div
  • WordPress 中的 jQuery.post()

    我目前正在为 Wordpress 编写一个聊天框插件 该插件使用 jQuery post 方法将数据发送到 php 文件 以便将输出写入 html 文件 该文件又将使用 jQuery 加载到聊天窗口 在我用来将聊天日志写入html文件的ph
  • IE jquery click 仅适用于 li 中的文本,不适用于整个框

    我创建了一系列作为 li 的按钮 我希望用户能够单击它们 ul class item list li class item button style color 4bb2c5 1 li li class item button style
  • 根据所选选项更改表数据

    我有一个表显示数据库中的数据 我有一个选择框 人们可以在其中选择他想要显示数据的货币 当他这样做时 我需要刷新数据并显示为新货币 我不知道如何在不刷新整个页面的情况下做到这一点 有什么想法吗
  • 如何制作像Stackoverflow一样的可折叠评论框

    我正在构建一个网站 并且有一个状态更新列表 我希望允许用户为列表中的每个项目撰写评论 但是我正在尝试实现一个类似于堆栈溢出工作方式的用户界面 特别是可折叠的评论表单 列表 用户在其中单击对列表中的特定状态更新添加评论 并且在列表中的该项目下
  • twitter bootstrap css 在 chrome 扩展中发生冲突

    我正在使用 bootstrap 来编写我正在编写的 chrome 扩展 当作为内容脚本导入时 CSS 似乎与我正在查看的许多网站发生冲突 即使在谷歌搜索结果页面中 想知道我是否可以做些什么来将其范围限制为我使用内容脚本注入的 dom 元素
  • 区分单击与 mousedown/mouseup

    我已经阅读了有关这种情况的 stackoverflow 上的几个答案 但没有一个解决方案有效 我尝试根据用户是否单击某个元素或使用 jQuery 将鼠标按住该元素来执行不同的操作 有可能做到这一点吗 onMouseDown 将在按下左侧或右
  • jQuery AJAX“multipart/form-data”未发送数据?

    我不知道为什么我无法让 jQuery 传递上传数据 因为 AJAX 对象似乎已正确配置 并且正在发送正确的 Content Type MIME Type 标头 我尝试了两种不同形式的请求 一种是在文字中包含 FormData 对象 另一种是
  • 在IOS中,引导模式中的iframe无法滚动

    我在引导程序模态体内有一个 iframe div class modal fade div class modal dialog div class modal content div class modal header div div
  • 优化正则表达式以过滤数千个 HTML 选择选项

    背景 我开发了一个基于 jQuery 的穿梭小部件 https stackoverflow com a 13557000 59087对于 HTMLselect元素 因为我找不到一个经过最低限度编码并提供正则表达式过滤器来补偿的元素变音符号
  • 加载 Ember.View 的内容后初始化 jQuery 插件

    DEBUG Ember VERSION 1 0 0 rc 6 ember js DEBUG Handlebars VERSION 1 0 0 rc 4 ember js DEBUG jQuery VERSION 1 9 1 控制器是一个Em
  • Bootstrap 网格边距

    我这里有一个jsfiddle http jsfiddle net nH5WP http jsfiddle net nH5WP 这是一个使用 Bootstrap 3 的超级简单的 3 x 3 网格 我想在每个块的右侧和底部添加边距 每行中的最
  • 将 Twitter 引导样式添加到 Rails 表单助手

    在阅读建议我使用带有引导程序集成的 Simple form gem 的答案后 我安装了它并根据 simple form 说明创建了我的表单 但输入框向右浮动 这是布局 正在使用部分 shared reg 调用该表单 div class co

随机推荐