Jquery Как хотел переключиться на следующую вкладку в ASP MVC5

Question

У меня есть мнение, как этот

View Code: -

<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 Для проверки для проверки и закрыть вкладку и откройте вкладку следующего: -

$('.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'); 
     } 
    }); 

я должен идти, чтобы закрыть активную вкладку на «section.collapse („тумблер“);», однако, не в состоянии т o откройте следующий, нажав следующую вкладку. Любая помощь будет высоко оценена. Я все еще пытаюсь изо всех сил в asp mvc, поэтому я мог пропустить очевидное.

Answer 1

Попробуйте это. Я немного починил разметку вкладки, завернул ее в форму (требуется для проверки jquery) и использовал .tab() вместо .collapse().

См. 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

Вы должны использовать .tab ('шоу') вместо .collapse ('тумблер').