how to make a single tap active and remaining tap in active by using javascript?

问题

I have created three tabs initially i want to make the first tab active once i click the save and continue button then only second tab visible.but in my code all three tabs are active at a same time.

<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();
    }

And demo page :Here's what I've tried for adding and removing the class:

Demo link

Like in this Demo page

Thanks

来源：https://stackoverflow.com/questions/46252243/how-to-make-a-single-tap-active-and-remaining-tap-in-active-by-using-javascript