在没有导航的情况下更改引导活动选项卡

Question

我有一个模态，在我的模态中有 3 个选项卡，但用户看不到任何导航选项卡来更改选项卡，模态正文中有一些按钮可以在特定选项卡之间切换。 我希望每次看到特定选项卡（始终是第一个选项卡）时打开此模式。现在发生的事情是我看到了最后一个关闭的标签。

这是我的代码示例

        <button class="btn btn-default" data-toggle="modal" data-target="#theModalID"">open modal</button>

        <div class="modal fade" id="theModalID" role="dialog">
        <div class="tab-content">
        <div id="tab1" class="tab-pane fade in active">
            <!-- tab 1 -->
        </div>
        <div id="tab2" class="tab-pane fade">
            <!-- tab 2 -->
            <button type="button" class="btn btn-default" data-toggle="tab" href="#tab3">tab3</button>
        </div>
        <div id="tab3" class="tab-pane fade">
            <!-- tab 3 -->
            <button type="button" class="btn btn-default" data-toggle="tab" href="#tab1">tab1</button>
        </div>
    </div>
    </div>

我每次都希望在模态显示上看到标签 1 作为活动标签。 我再次提到没有导航选项卡可以在选项卡之间切换。 tnx

Answer 1

您可以在打开选项卡时触发按钮，这些按钮将在模式打开时显示第一个选项卡按钮。 show.bs.modal 事件是在模式打开之前触发的引导程序事件。 演示如下：

  $("#myModal").on("show.bs.modal", function () {
              $('#tab2-btn').trigger("click");
            });

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
             <div class="tab-content">
                        <div id="tab1" class="tab-pane fade in active">
                            <!-- tab 1 -->
                            tab 1 text
                            <button type="button" class="btn btn-default" data-toggle="tab" href="#tab2">tab2</button>
                        </div>
                        <div id="tab2" class="tab-pane fade">
                            <!-- tab 2 -->
                            tab 2 text
                            <button id="tab2-btn"  type="button" class="btn btn-default" data-toggle="tab" href="#tab3">tab3</button>
                        </div>
                        <div id="tab3" class="tab-pane fade">
                            <!-- tab 3 -->
                            tab 3 text
                            <button id="tab1-btn" type="button" class="btn btn-default" data-toggle="tab" href="#tab1">tab1</button>
                        </div>
                    </div>
        </div>
       
      </div>
      
    </div>
  </div>
  

Answer 2

您可以为您的模态触发器添加功能 onclick 以每次显示第一个选项卡

由于您没有提供模态触发元素的 html 代码，所以我假设任何元素

showTabOne = function(){
	$('button[href="#tab1"]').tab('show');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>
        <button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-info btn-lg" onclick="showTabOne()">Open Modal</button>
    </div>
    
    <div class="modal fade" id="myModal" role="dialog" style="display:none">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <div class="tab-content">
                    <div id="tab1" class="tab-pane fade in active">
                        <!-- tab 1 -->
                        tab 1 text
                        <button type="button" class="btn btn-default" data-toggle="tab" href="#tab2">tab2</button>
                    </div>                                                                  
                    <div id="tab2" class="tab-pane fade">
                        <!-- tab 2 -->
                        tab 2 text
                        <button type="button" class="btn btn-default" data-toggle="tab" href="#tab3">tab3</button>
                    </div>
                    <div id="tab3" class="tab-pane fade">
                        <!-- tab 3 -->
                        tab 3 text
                        <button id="tab1-btn" type="button" class="btn btn-default" data-toggle="tab" href="#tab1">tab1</button>
                    </div>
                </div>
            </div>
        </div>
     </div>

或者另一个选项是触发点击打开tab1的按钮 所以在这种情况下 js 将是

showTabOne = function(){
        $('#tab1-btn').click();
}

jsfiddle Demo 用于两个选项（第二个已评论）