Cannot get Jquery click to change class

Question

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>

John Doe · Accepted Answer · 2017-10-10 02:38:12Z

1

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.

answered Oct 10, 2017 at 2:38

John Doe

2221 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nick Artymiak · Accepted Answer · 2017-10-10 02:58:03Z

1

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.

answered Oct 10, 2017 at 2:58

Nick Artymiak

245 bronze badges

Collectives™ on Stack Overflow

Cannot get Jquery click to change class

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related