change bootstrap active tab without having nav

Question

i have a modal and in my modal there are 3 tabs but the user cannot see any nav-tabs to change the tabs there are some buttons in the modal-body to switch between specific tabs. i want when this modal opens every time i see a specific tab(the first one always). what happens now is that i see the last closed tab.

here is a sample of my code

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

i want on modal show every time see tab 1 as the active tab. i mention again there is no nav-tabs to switch between tabs. tnx

Answer 1

You can trigger buttons on the opening of the tabs that will show the first tab button on modal opening. show.bs.modal event is the event of the bootstrap that fires before the modal opens. DEMO below:

  $("#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

You can add function onclick for your modal trigger to show the first tab every time

As you didn't provide the html code for modal trigger element so i supposed any element

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>

or another option is to trigger click on the button that open tab1 so js in this case will be

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

jsfiddle Demo for both options (second one is commented)