提交点击按钮隐藏第一个标签并显示下一个标签？

时间：2017-10-12 03:12:06

标签： javascript jquery html css css3

我们最初有三个标签，第一个标签应该可以使我工作正常。点击提交按钮后，第二个标签应该打开，但它不起作用。

<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

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

2 个答案:

答案 0 :(得分：2)

您可以使用解决方案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而非禁用。

希望这会对你有所帮助。

答案 1 :(得分：1)

工作： https://jsfiddle.net/q6adcnLs/

  1. 您有多个具有相同id属性的元素
  2. 您错误地将.active课程放错了.nav-link（应该在.nav-item中）
  3. 您可以使用return true或return false代替preventDefault()

    4. <强>更新

    停用其他无效标签 https://jsfiddle.net/q6adcnLs/1/

相关问题
最新问题