Question

我有以下页面：http://mindspyder.com/newline/my-account.html

该页面上的以下代码：

＆＃13;

<!-- Nav tabs -->

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item"> <a class="btn btn-primary btn-sm" href="#" role="button"><i class="fa fa-search-plus"></i> View</a> </li>
  <li class="nav-item"> <span data-toggle="modal" data-target="#myModal"><a class="btn btn-primary btn-sm" href="#delete" role="tab" data-toggle="tab"><i class="fa fa-times"></i> Delete</a></span></li>
  <li class="nav-item"> <a class="btn btn-primary btn-sm" href="#download" role="tab" data-toggle="tab">Settings</a> </li>
</ul>

<!-- /Nav tabs --> 
<!-- Tab panes -->

<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="review"></div>
  <div role="tabpanel" class="tab-pane" id="edit"></div>
  <div role="tabpanel" class="tab-pane" id="delete">hello</div>
  <div role="tabpanel" class="tab-pane" id="download">
    <p>
    <form>
      <p>
        <label>
          <input type="checkbox" name="CheckboxGroup1" value="Invoice" id="CheckboxGroup1_0">
          Invoice</label>
        <br>
        <label>
          <input type="checkbox" name="CheckboxGroup1" value="Establishment Kit" id="CheckboxGroup1_1">
          Establishment Kit</label>
        <br>
        <label>
          <input type="checkbox" name="CheckboxGroup1" value="Declaration of Custody Trust" id="CheckboxGroup1_2">
          Declaration of Custody Trust</label>
        <br>
        <label>
          <input type="checkbox" name="CheckboxGroup1" value="Trustee Minutes" id="CheckboxGroup1_3">
          Trustee Minutes</label>
        <br>
        <label>
          <input type="checkbox" name="CheckboxGroup1" value="Compliance Letter" id="CheckboxGroup1_4">
          Compliance Letter</label>
        <br>
      </p>
    </form>
    </p>
    <p>
      <button type="button" class="btn btn-success btn-sm">Download Selected <i class="fa fa-arrow-down"></i></button>
    </p>
  </div>
</div>

<!-- /Tab panes -->

＆＃13;

现在，如果您转到该页面并单击蓝色的“删除”按钮，则一切正常。现在，如果单击“取消”，然后单击其中一个其他选项卡，它仍然可以正常工作。问题是您再次单击“删除”，打开模式时它不会切换回“删除”选项卡，但会将其保留在上一个选项卡上。

我做错了什么？

Answer 1

我通过改变嵌套来弄明白，所以：

<span data-toggle="modal" data-target="#myModal"><a class="btn btn-primary btn-sm" href="#delete" role="tab" data-toggle="tab"><i class="fa fa-times"></i> Delete</a></span>

变为：

<a class="btn btn-primary btn-sm" href="#delete" role="tab" data-toggle="tab"><span data-toggle="modal" data-target="#myModal"><i class="fa fa-times"></i> Delete</span></a>

现在它可以正常工作。

多个数据切换无法正常工作 - Bootstrap 4

1 个答案: