JQuery Wie Schalter zum nächsten Tab in ASP mögen MVC5

Question

Ich habe eine Ansicht wie dieser

Code anzeigen: -

<div class="col-md-3" style="background-color:white" id="Tabs"> 
    <ul class="nav nav-tabs tabs-left"> 
     <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
     <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> 
    </ul> 
</div> 
<div class="col-md-9 tabs-left" style="background-color:white"> 
    <div class="tab-content"> 
     <div id="home" class="tab-pane fade in active"> 
      <div class="panel-body fixed-panel"> 
       <div class="row"> 
        <div class="col-lg-3"> 
         @Html.DropDownList("List", new SelectList(ViewBag.List, "ListID", "ListDescription"), "Select", new { id = "List1"}) 
        </div> 
        <a href="#" class="btn btn-default pull-right nexttab">Continue</a> 
       </div> 
      </div> 
     </div> 
     <div id="menu1" class="tab-pane fade in active"> 
      <div class="panel-body fixed-panel"> 
       <div class="row"> 
        <div class="col-lg-3"> 
            @Html.DropDownList("List", new SelectList(ViewBag.List, "ListID", "ListDescription"), "Select", new { id = "List1"}) 
        </div> 
       </div> 
      </div> 
     </div> 
     <div id="menu2" class="tab-pane fade in active"> 
      <div class="panel-body fixed-panel"> 
       <div class="row"> 
        <div class="col-lg-3"> 
            @Html.DropDownList("List", new SelectList(ViewBag.List, "ListID", "ListDescription"), "Select", new { id = "List1"}) 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

"

JQuery für die Validierung Um zu überprüfen, und die Registerkarte schließen und öffnen Sie den nächsten Registerkarte: -

$('.nexttab').click(function (e) { 

     e.preventDefault(); 
     var sectionValid = true; 
     section = $(this).closest('.tab-pane.fade'); 
     $.each(section.find('input'), function() { 
      if (!$(this).valid()) { 
       sectionValid = false; 
      } 
     }); 

     if (sectionValid) { 
      // collapse current section: 
      section.collapse('toggle'); 
      // find and uncollapse next section: 
      section.next().find('.tab-pane.fade').collapse('toggle'); 
     } 
    }); 

gehe ich habe die aktiven Registerkarte durch schließen „section.collapse (‚Toggle‘);“ jedoch nicht in der Lage t o Öffnen Sie das nächste und klicken Sie auf den nächsten Tab. Jede Hilfe wird sehr geschätzt. Ich versuche immer noch meine Hände bei asp mvc, damit ich das Offensichtliche übersehen hätte.

Answer 1

Versuchen Sie dies. Ich habe das Tab-Markup etwas aufgeräumt, es mit einem Formular umwickelt (benötigt von jquery validate) und .tab() anstelle von .collapse() verwendet.

Die entsprechende Dokumentation finden Sie unter http://getbootstrap.com/javascript/#tabs.

$('.nexttab').click(function(e) { 
 

 
    e.preventDefault(); 
 
    var sectionValid = true; 
 
    section = $(this).closest('.tab-pane.fade'); 
 
    sectionValid = section.closest('form').valid(); 
 

 
    if (sectionValid) { 
 
    // find and uncollapse next section: 
 
    $(".nav-tabs .active a").closest("li").next().find("a").tab("show"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script> 
 

 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<form> 
 

 
    <ul class="nav nav-tabs tabs-left"> 
 
    <li class="active"><a data-toggle="tab" href="#home">Home</a> 
 
    </li> 
 
    <li><a data-toggle="tab" href="#menu1">Menu 1</a> 
 
    </li> 
 
    </ul> 
 

 
    <div class="tab-content"> 
 
    <div id="home" class="tab-pane fade in active"> 
 
     <div class="panel-body fixed-panel"> 
 
     <div class="row"> 
 
      <div class="col-lg-3"> 
 

 
      </div> 
 
      <a href="#" class="btn btn-default pull-right nexttab">Continue</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div id="menu1" class="tab-pane fade in active"> 
 
     <div class="panel-body fixed-panel"> 
 
     <div class="row"> 
 
      <div class="col-lg-3"> 
 

 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div id="menu2" class="tab-pane fade in active"> 
 
     <div class="panel-body fixed-panel"> 
 
     <div class="row"> 
 
      <div class="col-lg-3"> 
 

 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Answer 2

Sie sollten die .tab ('show') anstelle von .collapse ('Toggle') werden.