jQuery tab-pane navigation does not work

Question

I am tying to navigate with tab-pane using next button, but it does not work. Please help me to resolve this.

                                <div role="tabpanel">
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs" role="tablist" id="myTab">
                                    <li role="presentation" class="active"><a
                                        href="#siteUser" aria-controls="SiteUser" role="tab"
                                        data-toggle="tab">Site/User</a></li>
                                    <li role="presentation"><a href="#isp"
                                        aria-controls="ISP" role="tab" data-toggle="tab">ISP</a></li>
                                    <li role="presentation"><a href="#country"
                                        aria-controls="Country" role="tab" data-toggle="tab">Country</a></li>
                                    <li role="presentation"><a href="#studioDefault"
                                        aria-controls="StdioDefault" role="tab" data-toggle="tab">Studio
                                            Default</a></li>
                                </ul>
                            </div>
                           <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="siteUser">
                                <br>
                                <table
                                    class="table table-striped table-bordered table-hover table-condensed" id="t1">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>SiteName</th>
                                            <th>UserName</th>
                                            <th>Channel</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="site-table-body">
                                <tr>
                                <td class="beer"></td>

                                <td>
                                <select class="form-control"><option>www.google.com</option>
                                        <option>www.yahoo.com</option>
                                        <option>www.flipkart.com</option>
                                        <option>www.gamil.com</option></select></td>
                                <td id="personalTd"><input type="checkbox" value="user"><input type="text" class="and" placeholder="Enter the User Name"/></td>
                                <td><input type="text" class="form-control" placeholder="Enter the Channel"/></td>
                                    <td><span class="glyphicon glyphicon-plus" id="add-row"></span>&nbsp<span class="glyphicon glyphicon-trash row-remover"></span></td>
                            </tr><tr id="add-template">
                                <td class="beer"></td>
                                <td>
                                <select class="form-control"><option>www.google.com</option>
                                        <option>www.yahoo.com</option>
                                        <option>www.flipkart.com</option>
                                        <option>www.gamil.com</option></select></td>
                                    <td><input type="checkbox" value="user"><input type="text" class="and" placeholder="Enter the User Name"/></td>
                                    <td><input type="text" class="form-control" placeholder="Enter the Channel"/></td>
                                    <td><span class="glyphicon glyphicon-plus" id="add-row"></span>&nbsp<span class="glyphicon glyphicon-trash row-remover"></span></td>
                                </tr>
                                    </tbody>
                                </table>
                                <div class="form-group nextButton">
                                    <button type="button" id="nextSiteUser"
                                        class="btn btn-success btn btn-xs">Next</button>
                                </div>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="isp">
                                <br>
                                <table
                                    class="table table-striped table-bordered table-hover table-condensed" id="t2">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>ISP</th>
                                            <th>Channel</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="isp-table-body">
                                    <tr>
                                <td class="beer"></td>
                                 <td><select class="form-control"><option>Vodafone</option>
                                        <option>Airtel</option>
                                        <option>BSNL</option>
                                        <option>Aircel</option></select></td>
                                <td><input type="text" class="form-control" placeholder="Enter the Channel"/></td>
                                    <td><span class="glyphicon glyphicon-plus" id="add-row"></span>&nbsp<span class="glyphicon glyphicon-trash row-remover"></span></td>
                            </tr>
                            <tr id="add-template">
                                <td class="beer"></td>
                                <td><select class="form-control"><option>Vodafone</option>
                                                <option>Airtel</option>
                                                <option>BSNL</option>
                                                <option>Aircel</option></select></td>
                                <td><input type="text" class="form-control" placeholder="Enter the Channel"/></td>
                                    <td><span class="glyphicon glyphicon-plus" id="add-row"></span>&nbsp<span class="glyphicon glyphicon-trash row-remover"></span></td>
                                </tr>

                                    </tbody>
                                </table>

                                <div class="form-group nextButton">
                                    <button type="button" id="nextIsp" class="btn btn-success btn btn-xs"
                                        value="submit">Next</button>
                                </div>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="country">
                                <br>
                                <table
                                    class="table table-striped table-bordered table-hover table-condensed" id="t3">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Country</th>
                                            <th>Channel</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="country-table-body">
                                <tr>
                                <td class="beer"></td>
                                <td><select class="form-control"><option>Country</option>
                                        <option>IN</option>
                                        <option>UK</option>
                                        <option>US</option></select></td>
                                <td><input type="text" class="form-control" placeholder="Enter the Channel"/></td>
                                <td><span class="glyphicon glyphicon-plus" id="add-row"></span>&nbsp<span class="glyphicon glyphicon-trash row-remover"></span></td>
                            </tr>
                            <tr id="add-template">
                                <td class="beer"></td>
                                <td><select class="form-control"><option>Country</option>
                                                <option>IN</option>
                                                <option>UK</option>
                                                <option>US</option></select></td>
                                <td><input type="text" class="form-control" placeholder="Enter the Channel"/></td>
                                <td><span class="glyphicon glyphicon-plus" id="add-row"></span>&nbsp<span class="glyphicon glyphicon-trash row-remover"></span></td>
                                </tr>
                                    </tbody>
                                </table>
                                <div class="form-group nextButton">
                                    <button type="button" id="nextCountry" class="btn btn-success btn btn-xs"
                                        value="submit">Next</button>
                                </div>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="studioDefault">
                                <br>
                                <table
                                    class="table table-striped table-bordered table-hover table-condensed" id="t4">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Studio Default</th>
                                            <th>Channel</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="studio-default-table-body">
                                <tr>
                                <td class="beer"></td>
                                <td><select class="form-control"><option>www.google.com</option>
                                        <option>www.yahoo.com</option>
                                        <option>www.flipkart.com</option>
                                        <option>www.gamil.com</option></select></td>
                                <td><input type="text" class="form-control" placeholder="Enter the Channel"/></td>
                                <td><span class="glyphicon glyphicon-plus" id="add-row"></span>&nbsp<span class="glyphicon glyphicon-trash row-remover"></span></td>
                            </tr><tr id="add-template">
                                <td class="beer"></td>
                                <td>
                                <select class="form-control"><option>www.google.com</option>
                                        <option>www.yahoo.com</option>
                                        <option>www.flipkart.com</option>
                                        <option>www.gamil.com</option></select></td>
                                <td><input type="text" class="form-control" placeholder="Enter the Channel"/></td>
                                <td><span class="glyphicon glyphicon-plus" id="add-row"></span>&nbsp<span class="glyphicon glyphicon-trash row-remover"></span></td>
                                </tr>
                                    </tbody>
                                </table>

                                <div class="form-group nextButton">
                                    <button type="button" id="finish" class="btn btn-success btn btn-xs"
                                        value="submit">Finish</button>
                                </div>
                            </div>
                        </div> 

JS code:
I want navigate from one tab-pane to a successive tab-pane using the next button. But the code is not working for me.

    $("#nextSiteUser").click(function(){
          $('#myTab a[href="#country"]').tab('show')
    });

Answer 1

Basically you have to:

• hide all tabs that dont have the active class
• bind all next buttons to the click event
• if the next button is clicked then hide the current tab and show the next one

Here is a DEMO

Note that you have to handle the case where the user reached the final tab and clicks Next.