Question

我的页面是从PHP生成的，TABS和TAB PANES是从MySQL填充的，在每个PANE中有2个按钮和2个隐藏输入，指示应根据点击的按钮和之前的隐藏输入来导航哪个TAB。< / p>

现在SIM上的按钮TAB HEADER #1确实打开了正确的选项卡，但它是唯一有效的按钮。

＆＃13;

$("#btn-next").click(function(event) {
  var valorProximo = $(this).prev().attr('id');
  $('.tab' + valorProximo).tab('show');
});

＆＃13;

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

＆＃13;

JSFIDDLE！

Answer 1

问题在于遵循HTML5规则（或更早版本），ID必须是唯一的。

摘录：

id属性指定其元素的唯一标识符（ID）。 [DOM]

该值必须在元素主页中的所有ID中唯一   子树，必须包含至少一个字符。价值不能   包含任何空格字符。

您可以找到更多文档here at w3.org。

以下是此代码可以运行的方式：link bootply

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

1 个答案: