如何通过使用javascript使单击活动并保持活动状态？

Question

我创建了三个标签最初我想让第一个标签激活一旦我点击保存并继续按钮然后只有第二个标签可见。但在我的代码中，所有三个标签同时处于活动状态。

<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">
                        <li class="nav-item">
                            <a class="nav-link active" href="#tabs-1-tab-1" 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="#tabs-1-tab-2" role="tab" data-toggle="tab">
                                <span class="nav-link-in">
                                    <span class="glyphicon glyphicon-music"></span>
                                    Company Reference
                                </span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#tabs-1-tab-3" role="tab" data-toggle="tab">
                                <span class="nav-link-in">
                                    <i class="fa fa-product-hunt"></i>
                                    Company Social Network
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div><!--.tabs-section-nav-->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade in active show" id="tabs-1-tab-1">Tab 1<br /><br />
                    <input type="submit" name="Submit" value="Save and Continue" class="btn btn-rounded btn-inline btn-success" />
                </div><!--.tab-pane-->
                <div role="tabpanel" class="tab-pane fade" id="tabs-1-tab-2">Tab 2<br /><br />
                    <input type="submit" name="Submit" value="Previous" class="btn btn-rounded btn-inline btn-primary" />
                <input type="submit" name="Submit" value="Next" class="btn btn-rounded btn-inline btn-success" />
                </div><!--.tab-pane-->
                <div role="tabpanel" class="tab-pane fade" id="tabs-1-tab-3">Tab 3
                    <br /><br />
                    <input type="submit" name="Submit" value="Previous" class="btn btn-rounded btn-inline btn-primary" />
                    <input type="submit" name="Submit" value="Finish" class="btn btn-rounded btn-inline btn-success" /></div><!--.tab-pane-->
            </div><!--.tab-content-->
        </section><!--.tabs-section-->
    </div>
</div>

 $(document).ready(function () {
        //Initialize tooltips
        $('.nav > li a[title]').tooltip();

        //Wizard
        $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

            var $target = $(e.target);

            if ($target.parent().hasClass('disabled')) {
                return false;
            }
        });

        $(".next-step").click(function (e) {

            var $active = $('.tbl .nav li.active');
            $active.next().removeClass('disabled');
            nextTab($active);

        });
        $(".prev-step").click(function (e) {

            var $active = $('.tbl .nav li.active');
            prevTab($active);

        });
    });

    function nextTab(elem) {
        $(elem).next().find('a[data-toggle="tab"]').click();
    }
    function prevTab(elem) {
        $(elem).prev().find('a[data-toggle="tab"]').click();
    }

和演示页面：以下是我尝试添加和删除课程的内容：

What is JavaScript's highest integer value that a Number can go to without losing precision?

就像这个Demo link

一样

谢谢