-2

Here is a snapshot of the problem I'm having:

enter image description here

When I press next it redirects to next Tab but doesn't changes the active tab enter image description here

but i want this enter image description here

My Code

        <ul class="nav nav-tabs">
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"><icon class="fa fa-home"></icon> Profile</a></li>

            </ul>
             <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade in active" id="home">
                                <!---adding form -->
                                    <div class="container">
                                      <div class="row">
                                    <form role="form">
                                       ..........
                                        <div class="row">
                                                <div class="col-xs-3 col-sm-3 col-md-3">
                                                    <span class="button-checkbox">
                                                        ***<button type="button" class="btn" data-color="info" data-toggle="tab" data-target="#profile" tabindex="9">NEXT</button>***

                                                    </span>
                                                </div>

                                            </div>


                                        </form>
                                    </div>
                                    </div>

                 </div>                 
                <div role="tabpanel" class="tab-pane fade" id="profile">.safsdgd..
                </div>

                </div>
        </div>

<button type="button" class="btn" data-color="info" data-toggle="tab" data-target="#profile" tabindex="9">NEXT</button>

Nic
  • 12,220
  • 20
  • 77
  • 105
Raghib Ahsan
  • 396
  • 2
  • 4
  • 14

1 Answers1

0

This should remove the active class from all the menu items and then add it the clicked one

(function($){
    $('ul.nav.nav-tabs li').click(function(){
        $('ul.nav li').each(function(){
            $(this).removeClass('active');
        });
        $(this).addClass('active');
    });
})(jQuery);
cameronjonesweb
  • 2,435
  • 3
  • 25
  • 37
  • Unable to run your query getting error http://picpaste.com/Menu_002-igEzgLSO.png saw this post http://stackoverflow.com/questions/6969245/different-ways-of-saying-document-ready-in-jquery – Raghib Ahsan Jun 25 '15 at 12:46
  • @RaghibAhsan I have tested it, it works fine. Either you are running the script before you reference jQuery or you aren't running jQuery at all – cameronjonesweb Jun 25 '15 at 21:15