两个带有选项卡的引导模式答案

【问题标题】：Two Bootstrap Modals with Tabs Within两个带有选项卡的引导模式
【发布时间】：2016-06-07 11:03:04
【问题描述】：

我已经成功使用引导模式/弹出窗口很长一段时间了。但这里有一个有趣的案例，让我非常惊讶。

如果您有一个带有标签的模式，那么我会得到预期的结果。它可以正常工作。

但是，如果您有多个带有标签的模态框，那么第一个模态框可以正常工作。其他人的标签没有响应。

您可以在下面的 sn-p 中查看示例。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap - Modal Demo With Tabs</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
        <h5 style="text-align: center;">Bootstrap - Modal Demo - With Tabs Within</h5>
        <div class="row text-center">
            <h4>Page One Modal #1 - Basic</h4>
            <a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">Page One Modal #1</a>
        </div>
     
        <div class="row text-center">
            <h4>Page One Modal #2 - Large</h4>
            <a href="#" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#largeModal">Page One Modal #2</a>
        </div>
        <hr>
            </div>

    <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
          </div>
          <div class="modal-body">
            <h3>Modal Body</h3>
          </div>
          
          <div class="tab-v2">
            <ul class="nav nav-tabs" id="myTab">
              <li><a href="#about" data-toggle="tab">About Us</a></li>
              <li><a href="#info" data-toggle="tab">Information</a></li>
              <li><a href="#survey" data-toggle="tab">Survey</a></li>
            </ul>
          
            <div class="tab-content">
              <div class="tab-pane fade in " id="about">
              <br>
              <p>About Us</p>
              </div>
          
              <div class="tab-pane fade in" id="info">
              <br>          
              <p>Information</p>          
              </div>
              <div class="tab-pane fade in" id="survey">
                <br>
                 <p>Survey</p>
              </div>
          
            </div>
          </div>
          
          
         
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Large Modal</h4>
          </div>
          <div class="modal-body">
            <h3>Modal Body</h3>
          </div>
          
          
          <div class="tab-v2">
            <ul class="nav nav-tabs" id="myTab">
              <li><a href="#about" data-toggle="tab">About Us</a></li>
              <li><a href="#info" data-toggle="tab">Information</a></li>
              <li><a href="#survey" data-toggle="tab">Survey</a></li>
            </ul>
          
            <div class="tab-content">
              <div class="tab-pane fade in " id="about">
              <br>
              <p>About Us 2</p>
              </div>
          
              <div class="tab-pane fade in" id="info">
              <br>          
              <p>Information 2</p>          
              </div>
              <div class="tab-pane fade in" id="survey">
                <br>
                 <p>Survey 2</p>
              </div>
          
            </div>
          </div>
          
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    

    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </body>
</html>

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap tabs bootstrap-modal

【解决方案1】：

两个选项卡中的 ID 相同。

将第二个选项卡的 ID 更改为例如 about-2、info-2 和 survey-2。不要忘记更改href 属性。

<div class="tab-v2">

  <ul class="nav nav-tabs" id="myTab">
    <li><a href="#about-2" data-toggle="tab">About Us</a></li>
    <li><a href="#info-2" data-toggle="tab">Information</a></li>
    <li><a href="#survey-2" data-toggle="tab">Survey</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane fade in " id="about-2">
    <br>
    <p>About Us 2</p>
  </div>

  <div class="tab-pane fade in" id="info-2">
    <br>          
    <p>Information 2</p>          
  </div>

  <div class="tab-pane fade in" id="survey-2">
    <br>
    <p>Survey 2</p>
  </div>

</div>

【讨论】：