javascript - 在提交时单击按钮隐藏第一个标签并显示下一个标签？

我们最初有三个标签，第一个标签应该启用我的工作正常。单击提交按钮后，第二个选项卡应该打开，但是它不起作用。

<div class="page-content">
    <div class="container-fluid">
        <header class="section-header">
            <div class="tbl">
                <div class="tbl-row">
                    <div class="tbl-cell">
                        <h2>Company Registration Form</h2>
                    </div>
                </div>
            </div>
        </header>

            <section class="tabs-section">
                <div class="tabs-section-nav tabs-section-nav-icons">
                    <div class="tbl">
                        <ul class="nav" role="tablist" id="myLinks">
                            <li class="nav-item">
                                <a class="nav-link active" href="#home" role="tab" data-toggle="tab">
                                    <span class="nav-link-in">
                                        <i class="font-icon font-icon-cogwheel"></i>
                                        Company Registration Form
                                    </span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#menu1" role="tab" data-toggle="tab">
                                    <span class="nav-link-in">
                                        <span class="glyphicon glyphicon-music"></span>
                                        Company Social Network
                                    </span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#menu2" role="tab" data-toggle="tab">
                                    <span class="nav-link-in">
                                        <i class="fa fa-product-hunt"></i>
                                        Company Reference
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div><!--.tabs-section-nav-->
                <div class="tab-content" id="myTabs">
                    <div role="tabpanel" class="tab-pane fade in active show" id="home">
                        <form id="form" action="">
                            <div class="form-group">
                                <label for="email">Email:</label>
                                <input type="email" class="form-control" id="email" placeholder="Enter email">
                            </div>
                            <div class="form-group">
                                <label for="pwd">Password:</label>
                                <input type="password" class="form-control" id="pwd" placeholder="Enter password">
                            </div>
                            <div class="checkbox">
                                <label><input type="checkbox"> Remember me</label>
                            </div>
                            <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                    </div><!--.tab-pane-->
                    <div role="tabpanel" class="tab-pane fade" id="menu1">
                        <form id="form" action="">
                            <div class="form-group">
                                <label for="email">Email:</label>
                                <input type="email" class="form-control" id="email" placeholder="Enter email">
                            </div>
                            <div class="form-group">
                                <label for="pwd">Password:</label>
                                <input type="password" class="form-control" id="pwd" placeholder="Enter password">
                            </div>
                            <div class="checkbox">
                                <label><input type="checkbox"> Remember me</label>
                            </div>
                            <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                    </div><!--.tab-pane-->
                    <div role="tabpanel" class="tab-pane fade" id="menu2">
                        <form id="form" action="">
                            <div class="form-group">
                                <label for="email">Email:</label>
                                <input type="email" class="form-control" id="email" placeholder="Enter email">
                            </div>
                            <div class="form-group">
                                <label for="pwd">Password:</label>
                                <input type="password" class="form-control" id="pwd" placeholder="Enter password">
                            </div>
                            <div class="checkbox">
                                <label><input type="checkbox"> Remember me</label>
                            </div>
                            <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                    </div><!--.tab-pane-->
                </div><!--.tab-content-->
            </section>


    </div>
</div>

脚本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $("#myTabs form").on('submit', function (e) {
        e.preventDefault();
        var linkHref = $(this).parents('.tab-pane').attr('id');
        $('#myLinks li')
              .find('a[href="#' + linkHref + '"]')
          .parent()
          .next()
          .find('a').tab('show')
          .attr('data-toggle', 'tab');
    });
</script>

Pass the value

在此图片值中传递给linkHref，但在单击“提交”按钮后，隐藏第一个标签，但下一个标签未打开。

Second Image blank page

输入提交按钮后的第二个屏幕截图空白页

最佳答案

在这里，您需要解决方案https://jsfiddle.net/7baqxro0/1/

$("#myTabs form").on('submit', function (e) {
  e.preventDefault();
  var linkHref = $(this).parents('.tab-pane').attr('id');
  $('#myLinks li a').removeClass('active');
  $('#myLinks li')
    .find('a[href="#' + linkHref + '"]')
    .parent()
    .next()
    .find('a')
    .tab('show')
    .addClass('active')
    .attr('data-toggle', 'tab');

  $('a.nav-link').not('.active').css('pointer-events', 'none');
});

$('a.nav-link').not('.active').css('pointer-events', 'none');

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="page-content">
    <div class="container-fluid">
        <header class="section-header">
            <div class="tbl">
                <div class="tbl-row">
                    <div class="tbl-cell">
                        <h2>Company Registration Form</h2>
                    </div>
                </div>
            </div>
        </header>

            <section class="tabs-section">
                <div class="tabs-section-nav tabs-section-nav-icons">
                    <div class="tbl">
                        <ul class="nav nav-tabs" role="tablist" id="myLinks">
                            <li class="nav-item">
                                <a class="nav-link active" href="#home" role="tab" data-toggle="tab">
                                    <span class="nav-link-in">
                                        <i class="font-icon font-icon-cogwheel"></i>
                                        Company Registration Form
                                    </span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#menu1" role="tab" data-toggle="tab">
                                    <span class="nav-link-in">
                                        <span class="glyphicon glyphicon-music"></span>
                                        Company Social Network
                                    </span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#menu2" role="tab" data-toggle="tab">
                                    <span class="nav-link-in">
                                        <i class="fa fa-product-hunt"></i>
                                        Company Reference
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div><!--.tabs-section-nav-->
                <div class="tab-content" id="myTabs">
                    <div role="tabpanel" class="tab-pane fade in active show" id="home">
                        <form id="form" action="">
                            <div class="form-group">
                                <label for="email">Email:</label>
                                <input type="email" class="form-control" id="email" placeholder="Enter email">
                            </div>
                            <div class="form-group">
                                <label for="pwd">Password:</label>
                                <input type="password" class="form-control" id="pwd" placeholder="Enter password">
                            </div>
                            <div class="checkbox">
                                <label><input type="checkbox"> Remember me</label>
                            </div>
                            <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                    </div><!--.tab-pane-->
                    <div role="tabpanel" class="tab-pane fade" id="menu1">
                        <form id="form" action="">
                            <div class="form-group">
                                <label for="email">Email:</label>
                                <input type="email" class="form-control" id="email" placeholder="Enter email">
                            </div>
                            <div class="form-group">
                                <label for="pwd">Password:</label>
                                <input type="password" class="form-control" id="pwd" placeholder="Enter password">
                            </div>
                            <div class="checkbox">
                                <label><input type="checkbox"> Remember me</label>
                            </div>
                            <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                    </div><!--.tab-pane-->
                    <div role="tabpanel" class="tab-pane fade" id="menu2">
                        <form id="form" action="">
                            <div class="form-group">
                                <label for="email">Email:</label>
                                <input type="email" class="form-control" id="email" placeholder="Enter email">
                            </div>
                            <div class="form-group">
                                <label for="pwd">Password:</label>
                                <input type="password" class="form-control" id="pwd" placeholder="Enter password">
                            </div>
                            <div class="checkbox">
                                <label><input type="checkbox"> Remember me</label>
                            </div>
                            <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                    </div><!--.tab-pane-->
                </div><!--.tab-content-->
            </section>


    </div>
</div>

请将您的CSS添加到代码中，我故意跳过了它。

我使用了CSS属性pointer-events: none而不是禁用它。

希望这会帮助你。

关于javascript - 在提交时单击按钮隐藏第一个标签并显示下一个标签？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46700810/