Question

我有一个模态，在我的模态中有3个标签，但是用户看不到任何导航标签来更改标签，模态主体中有一些按钮可以在特定标签之间切换。每当我看到一个特定的标签（总是第一个）时，我想要这个模态打开。现在发生的是我看到最后一个关闭的标签。

这是我的代码示例

DefaultDenseGenericMatrix2D<Square>

我想在模态显示每次看到标签1作为活动标签。我再次提到没有导航标签可以在标签之间切换。 tnx

Answer 1

您可以为模态触发添加功能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这两个选项（第二个被评论）

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: