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 检查验证并关闭选项卡并打开下一个选项卡：-

    $('.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('toggle');”关闭活动标签但是无法在单击下一个选项卡时打开下一个。任何帮助将不胜感激。我仍在尝试使用 asp mvc，所以我可能错过了显而易见的事情。

Answer 1

试试这个。我稍微清理了选项卡标记，用表单（jquery validate 需要）将其包装起来，并使用.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('show') 而不是 .collapse('toggle')。