带有特定导航按钮的引导选项卡

Bootstrap tabs with specific buttons for navigation

本文关键字:选项 按钮 导航      更新时间:2023-09-26

我的页面是从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