jQueryのどのASP MVC5で次のタブにスイッチを好きに

Question

私はこの

コードの表示のようなビューがあります： -

<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を検証するためにチェックし、タブを閉じ、次のタブを開きます。 -

「section.collapse（ 'toggle'）;」でアクティブなタブを閉じますが、 o次のタブをクリックして次のタブを開きます。どんな助力も高く評価されます。私はまだaspのmvcで私の手をしようとしているので、私は明らかに見逃していた可能性があります。

Answer 1

私はタブマークアップを少しきれいにし、フォーム（jquery validateによって必要）でラップし、.collapse()の代わりに.tab()を使用しました。

関連ドキュメントについては、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

代わり.collapse（ 'トグル'）の.TAB（ 'ショー'）を使用する必要があります。