CODEWITHSUNDEEP
jqueryhtml
Adam Blasingame
Adam Blasingame

Reputation: 17

Cannot get Jquery click to change class

I had the code in an ASP.Net project originally but to try and troubleshoot I moved it to a seperate web server but I still cannot get it switching between the tab panes with the buttons.Any help debugging this would be greatly appreciated.

Script Code

 $('.continue').click(function () {
                $('.nav-tabs > .active').next('li').find('a').trigger('click');
            });
            $('.back').click(function () {
                $('.nav-tabs> .active').prev('li').find('a').trigger('click');
            });

HTML

<ul class="nav nav-tabs" >
                <li class="presentation"  aria-controls="incident" class="active">
                    <a href="#incident"  data-toggle="tab">Incident</a>

                </li>
                <li>
                    <a href="#timesmileage"  data-toggle="tab">Times/Mileage</a>
                </li>
                <li>
                    <a href="#patient"  data-toggle="tab">Patient</a>
                </li>
                <li>
                    <a href="#billing" data-toggle="tab">Billing</a>
                </li>
                <li>
                    <a href="#scene"  data-toggle="tab">Scene</a>
                </li>
  </ul>


  <div class="row">
        <a class="btn btn-primary back">Go Back</a>
        <a class="btn btn-primary continue">Continue</a>
            </div>

Upvotes: 1

Views: 35

Answers (2)

Nick Artymiak
Nick Artymiak

Reputation: 24

change

<li class="presentation"  aria-controls="incident" class="active">
    <a href="#incident"  data-toggle="tab">Incident</a>
</li>

to

<li class="presentation active"  aria-controls="incident" >
    <a href="#incident"  data-toggle="tab">Incident</a>
</li>

having two class attributes is causing jQuery not to find your "active" tab by its selector.

Upvotes: 1

John Doe
John Doe

Reputation: 222

Firstly, you have two class attributes attached to your first <li>. You should change it to <li class="presentation active">.

As for your code, if you have the appropriate CSS written for .presentation and .active, then this should work:

$('.continue').click(function () {
    $('.nav-tabs > .active').removeClass('presentation active').next('li').addClass('presentation active');
});

$('.back').click(function () {
    $('.nav-tabs> .active').removeClass('presentation active').prev('li').addClass('presentation active');
});

You don't have any event attached to the click events of your <a> tags, which is why your original code doesn't work.

Upvotes: 1

Related Questions