Activer l'onglet d'amorçage actif lorsque vous cliquez sur le bouton

Question

Je dois être en mesure de cliquer sur le bouton Render cropped image et de faire passer l'onglet actif à la vue Rendu.

<div class="container"> 
<div class="bs-docs-example"> 
    <ul id="myTab" class="nav nav-tabs"> 
     <li class="active"><a href="#home" data-toggle="tab">Crop</a> 

     </li> 
     <li><a href="#profile" data-toggle="tab">Render View</a> 

     </li> 
    </ul> 
    <div id="Content" class="tab-content"> 
     <div class="tab-pane fade in active" id="home"> 
      <div class="col-md-6"> 
       <div class="panel crop"> 
        <div class="well"> 
         <div class="file-warning"></div> 
         <div class="form-group"> 
          <label for="imageid">Select an image</label> 
          <input type="file" name="file" class="btn btn-default form-control" id="file" accept="image/jpg, image/png, image/jpeg" /> 
         </div> 
         <div class="form-group"> 
          <label for="imageid">Enter asset ID</label> 
          <input type="text" onkeypress="return charsOnly(this, event)" maxlength="64" class="form-control" id="imageid" name="imageid" placeholder="Enter image ID"> 
         </div> 
         <button class="btn btn-default" id="reset">Reset</button> 
         <!--<input id="renderButton" type="button" value="Render final image" class="btn btn-primary" />--></div> 
        <div class="panel-body cropper"> 
         <div id="container" class="well"></div> 
         <input id="renderButton" type="button" value="Render cropped image" class="btn btn-primary" /> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="tab-pane fade" id="profile"> 
      <div class="col-md-6 render"> 
       <div class="panel"> 
        <div class="panel-body"> 
         <div class="response"></div> 
         <div id="result_container" class="result"></div> 
        </div> 
        <!--<div class="share-link"></div>--> 
        <div class="well submit-well"> 
         <div class="share-link"></div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 


var $tabs = $('#Content'); 

$('#renderButton').on('click', function() { 
    $tabs.filter('.active').next('li').find('a[data-toggle="tab- pane"]').tab('show'); 
}); 

jsFiddle: Link

Answer 1

Essayez cette http://jsfiddle.net/erv8fedh/230/

$('#renderButton').on('click', function() { 
    $('#myTab a[href="#profile"]').tab('show'); 
});