带有特定导航按钮的引导选项卡
Bootstrap tabs with specific buttons for navigation
我的页面是从PHP生成的,TABS和TAB PANES是从MySQL填充的,在每个PANE中都有2个按钮和2个隐藏输入,它们决定了应该根据单击的按钮和以前的隐藏输入来导航哪个TAB。
现在TAB HEADER #1
上的按钮SIM
确实打开了正确的TAB,但它是唯一工作的按钮。
$("#btn-next").click(function(event) {
var valorProximo = $(this).prev().attr('id');
$('.tab' + valorProximo).tab('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<li class="active"><a class="tabValidacao" href="#aValidacao" data-toggle="tab">First Active</a>
</li>
<li><a class="tab1" href="#a1" data-toggle="tab">Tab Header #1</a>
</li>
<li><a class="tab2" href="#a2" data-toggle="tab">Tab Header #2</a>
</li>
<li><a class="tab3" href="#a3" data-toggle="tab">Tab Header #3</a>
</li>
<li><a class="tab4" href="#a4" data-toggle="tab">Tab Header #4</a>
</li>
<li><a class="tab5" href="#a5" data-toggle="tab">Tab Header #5</a>
</li>
<li><a class="tab6" href="#a6" data-toggle="tab">Tab Header #6</a>
</li>
<li><a class="tab7" href="#a7" data-toggle="tab">Tab Header #7</a>
</li>
<li><a class="tab8" href="#a8" data-toggle="tab">Tab Header #8</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="aValidacao">
<h3>Bla bla First Active:</h3>
<br />
</div>
<div class="tab-pane" id="a1">
<br />
<h3>Tab 1:</h3>
<p>Text Text</p>
<h3>Action:</h3>
<p>Text Text</p>
<input class="hidden" id="3" />
<button class="btn btn-success btnNavi" id="btn-next">SIM</button>
<input class="hidden" id="2" />
<button class="btn btn-danger">NAO</button>
</div>
<div class="tab-pane" id="a2">
<br />
<h3>Tab 2:</h3>
<p>Text Text</p>
<h3>Action:</h3>
<p>Text Text</p>
<input class="hidden" id="4" />
<button class="btn btn-success btnNavi" id="btn-next">PING OK</button>
<input class="hidden" id="6" />
<button class="btn btn-danger">PING NOK</button>
</div>
<div class="tab-pane" id="a3">
<br />
<h3>Tab 3:</h3>
<p>Text Text</p>
<h3>Action:</h3>
<p>Text Text</p>
<input class="hidden" id="1" />
<button class="btn btn-success btnNavi" id="btn-next">ENCAMINHAR</button>
<input class="hidden" id="1" />
<button class="btn btn-danger">ENCAMINHAR</button>
</div>
<div class="tab-pane" id="a4">
<br />
<h3>Tab 4:</h3>
<p>Text text Text</p>
<h3>Action:</h3>
<p>Text Text</p>
<input class="hidden" id="4" />
<button class="btn btn-success btnNavi" id="btn-next">TESTE OK</button>
<input class="hidden" id="2" />
<button class="btn btn-danger">TESTE NOK</button>
</div>
<div class="tab-pane" id="a5">
<br />
<h3>Tab 5:</h3>
<p>Text Text</p>
<h3>Action:</h3>
<p>Text Text</p>
<input class="hidden" id="2" />
<button class="btn btn-success btnNavi" id="btn-next">TESTE OK</button>
<input class="hidden" id="2" />
<button class="btn btn-danger">TESTE NOK</button>
</div>
<div class="tab-pane" id="a6">
<br />
<h3>Tab 6:</h3>
<p>Text Text</p>
<h3>Action:</h3>
<p>Text Text</p>
<input class="hidden" id="1" />
<button class="btn btn-success btnNavi" id="btn-next">OK</button>
<input class="hidden" id="6" />
<button class="btn btn-danger">NOK</button>
</div>
<div class="tab-pane" id="a7">
<br />
<h3>Tab 7:</h3>
<p>Text Text</p>
<h3>Action:</h3>
<p>Text Text</p>
<input class="hidden" id="1" />
<button class="btn btn-success btnNavi" id="btn-next">OK</button>
<input class="hidden" id="7" />
<button class="btn btn-danger">NOK</button>
</div>
<div class="tab-pane" id="a8">
<br />
<h3>Tab 8:</h3>
<p>Text Text</p>
<h3>Action:</h3>
<p>Text Text</p>
<input class="hidden" id="1" />
<button class="btn btn-success btnNavi" id="btn-next">OK</button>
<input class="hidden" id="2" />
<button class="btn btn-danger">NOK</button>
</div>
</div>
JSFIDDLE!
问题是在遵循HTML5规则(或更早的规则)时,ID必须是唯一的
提取:
id属性指定其元素的唯一标识符(id)。[DOM]
该值在元素主页中的所有ID中必须是唯一的子树,并且必须至少包含一个字符。该值不得包含任何空格字符。
你可以在w3.org上找到更多的文档。
以下是运行此代码的方法:link bootply
相关文章:
- 如何在不需要单击按钮的情况下获取选项的值
- 单击按钮即可在浏览器的新选项卡中打开 Sapui5 详细信息页面
- 复选框/单选按钮-添加所选项目的总价
- PayPal按钮是否有一个简单的选项,其中金额基于一些用户输入
- 更新:仅根据单选按钮和所选选项选择特定项目
- 如何在ASP.NET中单击按钮后激活启动选项卡
- 关于&从win8 RC转换为win8 RTM后,首选项弹出按钮为空
- 单击按钮进入下一个选项卡,而不是单击选项卡
- Angular:如何使用ngRepeat并设置默认单选按钮选项
- 如何更改单击按钮时的javascript滑块选项
- Ajax在使用onclick选项时无法处理HTML表单中的提交按钮
- 隐藏结账按钮,直到选择发货选项
- 如何将每个选项按钮与其自己的单个标记相关联
- IE9 问题:动态创建(通过 innerHTML)选项按钮和复选框不起作用
- 禁用javasscript中的选项/按钮
- “刷卡back"在离子项目后,点击离子选项按钮
- Bootstrap插件创建选项按钮与任意js
- 如何制作交互式选项按钮
- 使用javascript函数在url执行下拉选项/按钮
- 如何让浏览器“保存图像为”选项按钮