查找 tab li 是否有活动的 class

Question

 $(document).ready(function() { $('.btnRew').hide(); $('.btnFw').click(function() { //$('.nav-tabs.active').parent().next('li').find('a').trigger('click'); $('.nav-tabs, .active').parent().next('li').find('a').trigger('click'); checky(); }); $('.btnRew').click(function() { //$('.nav-tabs.active').parent().prev('li').find('a').trigger('click'); $('.nav-tabs, .active').parent().prev('li').find('a').trigger('click'); checky(); }); function checky() { if (document.getElementById("screen").classList.contains('active')) { console.log('its active'); $('.btnRew').hide(); } else { console.log('not active'); $('.btnRew').show(); } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://scdcare.org/assets/css/style.css" rel="stylesheet"/> <link href="https://allyoucan.cloud/cdn/icofont/1.0.1/icofont.css" rel="stylesheet"/><section id="milestones" class="milestones"> <div class="container"> <div class="section-title"> <p class="display-body">Milestones | <span class="display-body2">Select an icon to read more about milestones and personal experiences</span></p> </div> <div class="row"> <div class="col-lg-12"> <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link active" id="screen-tab" data-toggle="tab" href="#screen" role="tab" aria-controls="screen" aria-selected="true"><img src="assets/img/Milestones_Icon1.png" /></a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="pen-tab" data-toggle="tab" href="#pen" role="tab" aria-controls="pen" aria-selected="false"><img src="assets/img/Milestones_Icon2.png" /></a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="immun-tab" data-toggle="tab" href="#immun" role="tab" aria-controls="immun" aria-selected="false"><img src="assets/img/Milestones_Icon3.png" /></a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="hu-tab" data-toggle="tab" href="#hu" role="tab" aria-controls="hu" aria-selected="false"><img src="assets/img/Milestones_Icon4.png" /></a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="tcd-tab" data-toggle="tab" href="#tcd" role="tab" aria-controls="tcd" aria-selected="false"><img src="assets/img/Milestones_Icon5.png" /></a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="day-tab" data-toggle="tab" href="#day" role="tab" aria-controls="day" aria-selected="false"><img src="assets/img/Milestones_Icon6.png" /></a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="mri-tab" data-toggle="tab" href="#mri" role="tab" aria-controls="mri" aria-selected="false"><img src="assets/img/Milestones_Icon7.png" /></a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="school-tab" data-toggle="tab" href="#school" role="tab" aria-controls="school" aria-selected="false"><img src="assets/img/Milestones_Icon8.png" /></a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="sports-tab" data-toggle="tab" href="#sports" role="tab" aria-controls="sports" aria-selected="false"><img src="assets/img/Milestones_Icon9.png" /></a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="trans-tab" data-toggle="tab" href="#trans" role="tab" aria-controls="trans" aria-selected="false"><img src="assets/img/Milestones_Icon10.png" /></a> </li> </ul> <div class="container"> <div class="row"> <div class="col-lg-12 anti-pad"> <div class="jumbotron"> <div class="tab-content" id="myTabContent"> <div id="mileButtons"> <a class="btn btnRew"><i class="icofont-simple-left"></i></a> <a class="btn btnFw"><i class="icofont-simple-right"></i></a> </div> <div class="tab-pane fade show active" id="screen" role="tabpanel" aria-labelledby="screen-tab"> <div class="container"> <div class="row justify-content-between"> <div class="col-lg-7"><span class="jumboMile">Genetic Screening</span></div> <div class="col-lg-3 text-right"> </div> </div> <div class="row"> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking. I am dead inside what do you feel you would bring to the table if you were hired for this position, nor cannibalize, or pipeline, for get all your ducks in a row.</p> </div> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking. I am dead inside what do you feel you would bring to the table if you were hired for this position, nor cannibalize, or pipeline, for get all your ducks in a row.</p> </div> </div> <.-- /Row--> </div> </div> <div class="tab-pane fade" id="pen" role="tabpanel" aria-labelledby="pen-tab"> <div class="container"> <div class="row justify-content-between"> <div class="col-lg-7"><span class="jumboMile">Penicillin</span></div> </div> <div class="row"> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking, I am dead inside what do you feel you would bring to the table if you were hired for this position, nor cannibalize, or pipeline. for get all your ducks in a row.</p> </div> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking, I am dead inside what do you feel you would bring to the table if you were hired for this position, nor cannibalize, or pipeline. for get all your ducks in a row.</p> </div> </div> <,-- /Row--> <div class="row"> <div class="col-12 pb-2"> </div> </div> <div class="row"> <div class="col-12 pb-2"> </div> </div> <div class="row"> <div class="col-12"> </div> </div> </div> </div> <div class="tab-pane fade" id="immun" role="tabpanel" aria-labelledby="immun-tab"> <div class="container"> <div class="row justify-content-between"> <div class="col-lg-7"><span class="jumboMile">Immunizations</span></div> </div> <div class="row"> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking, I am dead inside what do you feel you would bring to the table if you were hired for this position, nor cannibalize. or pipeline. for get all your ducks in a row,</p> </div> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking, I am dead inside what do you feel you would bring to the table if you were hired for this position, nor cannibalize. or pipeline. for get all your ducks in a row.</p> </div> </div> <.-- /Row--> <div class="row"> <div class="col-12 pb-2"> <div class="jumboQ"> <span class="jumboSub">Laura | Age 7 | SS</span> <p>"Open door policy draw a line in the sand. Back of the net low hanging fruit. Product market fit, Streamline forcing function accountable talk at the end of the day,"</p> </div> </div> </div> <div class="row"> <div class="col-12 pb-2"> </div> </div> <div class="row"> <div class="col-12"> </div> </div> </div> </div> <div class="tab-pane fade" id="hu" role="tabpanel" aria-labelledby="hu-tab"> <div class="container"> <div class="row justify-content-between"> <div class="col-lg-7"><span class="jumboMile">Hydroxyurea</span></div> </div> <div class="row"> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking, I am dead inside what do you feel you would bring to the table if you were hired for this position. nor cannibalize. or pipeline, for get all your ducks in a row,</p> </div> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking, I am dead inside what do you feel you would bring to the table if you were hired for this position. nor cannibalize. or pipeline, for get all your ducks in a row,</p> </div> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking, I am dead inside what do you feel you would bring to the table if you were hired for this position. nor cannibalize. or pipeline, for get all your ducks in a row,</p> </div> </div> <,-- /Row--> <div class="row"> <div class="col-12 pb-2"> </div> </div> <div class="row"> <div class="col-12 pb-2"> </div> </div> <div class="row"> <div class="col-12 pb-2"> </div> </div> </div> </div> <div class="tab-pane fade" id="tcd" role="tabpanel" aria-labelledby="tcd-tab"> <div class="container"> <div class="row justify-content-between"> <div class="col-lg-7"><span class="jumboMile">TCD</span></div> </div> <div class="row"> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking. I am dead inside what do you feel you would bring to the table if you were hired for this position. nor cannibalize, or pipeline, for get all your ducks in a row,</p> </div> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking. I am dead inside what do you feel you would bring to the table if you were hired for this position. nor cannibalize, or pipeline, for get all your ducks in a row,</p> </div> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking. I am dead inside what do you feel you would bring to the table if you were hired for this position. nor cannibalize. or pipeline. for get all your ducks in a row.</p> </div> </div> <.-- /Row--> <div class="row"> <div class="col-12 pb-2"> <div class="jumboQ"> <span class="jumboSub">Laura | Age 7 | SS</span> <p>"Open door policy draw a line in the sand, Back of the net low hanging fruit, Product market fit, Streamline forcing function accountable talk at the end of the day."</p> </div> </div> </div> <div class="row"> <div class="col-12 pb-2"> </div> </div> <div class="row"> <div class="col-12"> </div> </div> </div> </div> <div class="tab-pane fade" id="day" role="tabpanel" aria-labelledby="day-tab"> <div class="container"> <div class="row justify-content-between"> <div class="col-lg-7"><span class="jumboMile">Starting Daycare</span></div> </div> <div class="row"> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking. I am dead inside what do you feel you would bring to the table if you were hired for this position, nor cannibalize, or pipeline, for get all your ducks in a row.</p> </div> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking. I am dead inside what do you feel you would bring to the table if you were hired for this position, nor cannibalize, or pipeline, for get all your ducks in a row.</p> </div> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking. I am dead inside what do you feel you would bring to the table if you were hired for this position. nor cannibalize. or pipeline. for get all your ducks in a row.</p> </div> </div> <,-- /Row--> <div class="row"> <div class="col-12 pb-2"> <div class="jumboQ"> <span class="jumboSub">Laura | Age 7 | SS</span> <p>"Open door policy draw a line in the sand, Back of the net low hanging fruit, Product market fit. Streamline forcing function accountable talk at the end of the day."</p> </div> </div> </div> <div class="row"> <div class="col-12 pb-2"> </div> </div> <div class="row"> </div> </div> </div> </div> <div class="tab-pane fade" id="mri" role="tabpanel" aria-labelledby="mri-tab"> <div class="container"> <div class="row justify-content-between"> <div class="col-lg-7"><span class="jumboMile">MRI's and Neuropsych Testing</span></div> </div> <div class="row"> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking, I am dead inside what do you feel you would bring to the table if you were hired for this position, nor cannibalize, or pipeline. for get all your ducks in a row.</p> </div> </div> <,-- /Row--> <div class="row"> <div class="col-12 pb-2"> </div> </div> <div class="row"> </div> <div class="row"> </div> </div> </div> <div class="tab-pane fade" id="school" role="tabpanel" aria-labelledby="school-tab"> <div class="container"> <div class="row justify-content-between"> <div class="col-lg-7"><span class="jumboMile">Starting School</span></div> </div> <div class="row"> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking, I am dead inside what do you feel you would bring to the table if you were hired for this position, nor cannibalize. or pipeline. for get all your ducks in a row,</p> </div> </div> <,-- /Row--> <div class="row"> </div> <div class="row"> </div> </div> </div> <div class="tab-pane fade" id="sports" role="tabpanel" aria-labelledby="sport-tab"> <div class="container"> <div class="row justify-content-between"> <div class="col-lg-7"><span class="jumboMile">Starting Sports</span></div> </div> <div class="row"> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking, I am dead inside what do you feel you would bring to the table if you were hired for this position. nor cannibalize. or pipeline. for get all your ducks in a row.</p> </div> </div> <.-- /Row--> <div class="row"> <div class="col-12 pb-2"> </div> </div> <div class="row"> <div class="col-12 pb-2"> </div> </div> </div> </div> <div class="tab-pane fade" id="trans" role="tabpanel" aria-labelledby="trans-tab"> <div class="container"> <div class="row justify-content-between"> <div class="col-lg-9"><span class="jumboMile">Eventual Transition From Pediatric Care</span></div> </div> <div class="row"> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking. I am dead inside what do you feel you would bring to the table if you were hired for this position, nor cannibalize, or pipeline, for get all your ducks in a row.</p> </div> </div> <!-- /Row--> <div class="row"> <div class="col-12"> <div class="jumboQ"> <span class="jumboSub">Laura | Age 7 | SS</span> <p>"Open door policy draw a line in the sand. Back of the net low hanging fruit. Product market fit. Streamline forcing function accountable talk at the end of the day."</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section>

I'm trying to determine whether or not the tab is active. I can get it to work after two clicks of the button, but not the first. It's like my code it not registering the first click. I'm trying to determine if the first li with an ID of screen is active. If it is, I want to hide the btnRew button. Again this works after I click the btnFw button twice, but not after the first time.

Answer 1

if (document.getElementById("screen").classList.contains('active')) {
  console.log('its active');
  $('.btnRew').hide();
}

Please try this to check if your element with id "screen" has a class "active".

Answer 2

Let me explain that.. the a with # href it takes few msecond/seconds to take effects it may be not noticeable with human eyes but still has a delay to make the action.. if you add a little bit of time using setTimeout() like the next example you'll got the point

 $(document).ready(function() { $('.btnRew').hide(); $('.btnFw').click(function() { //$('.nav-tabs.active').parent().next('li').find('a').trigger('click'); $('.nav-link.active').parent().next('li').find('a').trigger('click'); checky(); }); $('.btnRew').click(function() { //$('.nav-tabs.active').parent().prev('li').find('a').trigger('click'); $('.nav-link.active').parent().prev('li').find('a').trigger('click'); checky(); }); }); function checky() { setTimeout( function (){ if ($("#screen").hasClass('active')) { console.log('its active'); $('.btnRew').hide(); } else { console.log('not active'); $('.btnRew').show(); } }, 500); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://scdcare.org/assets/css/style.css" rel="stylesheet"/> <link href="https://allyoucan.cloud/cdn/icofont/1.0.1/icofont.css" rel="stylesheet"/><section id="milestones" class="milestones"> <div class="container"> <div class="section-title"> <p class="display-body">Milestones | <span class="display-body2">Select an icon to read more about milestones and personal experiences</span></p> </div> <div class="row"> <div class="col-lg-12"> <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link active" id="screen-tab" data-toggle="tab" href="#screen" role="tab" aria-controls="screen" aria-selected="true"><img src="assets/img/Milestones_Icon1.png" /></a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="pen-tab" data-toggle="tab" href="#pen" role="tab" aria-controls="pen" aria-selected="false"><img src="assets/img/Milestones_Icon2.png" /></a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="immun-tab" data-toggle="tab" href="#immun" role="tab" aria-controls="immun" aria-selected="false"><img src="assets/img/Milestones_Icon3.png" /></a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="hu-tab" data-toggle="tab" href="#hu" role="tab" aria-controls="hu" aria-selected="false"><img src="assets/img/Milestones_Icon4.png" /></a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="tcd-tab" data-toggle="tab" href="#tcd" role="tab" aria-controls="tcd" aria-selected="false"><img src="assets/img/Milestones_Icon5.png" /></a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="day-tab" data-toggle="tab" href="#day" role="tab" aria-controls="day" aria-selected="false"><img src="assets/img/Milestones_Icon6.png" /></a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="mri-tab" data-toggle="tab" href="#mri" role="tab" aria-controls="mri" aria-selected="false"><img src="assets/img/Milestones_Icon7.png" /></a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="school-tab" data-toggle="tab" href="#school" role="tab" aria-controls="school" aria-selected="false"><img src="assets/img/Milestones_Icon8.png" /></a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="sports-tab" data-toggle="tab" href="#sports" role="tab" aria-controls="sports" aria-selected="false"><img src="assets/img/Milestones_Icon9.png" /></a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="trans-tab" data-toggle="tab" href="#trans" role="tab" aria-controls="trans" aria-selected="false"><img src="assets/img/Milestones_Icon10.png" /></a> </li> </ul> <div class="container"> <div class="row"> <div class="col-lg-12 anti-pad"> <div class="jumbotron"> <div class="tab-content" id="myTabContent"> <div id="mileButtons"> <a class="btn btnRew"><i class="icofont-simple-left"></i></a> <a class="btn btnFw"><i class="icofont-simple-right"></i></a> </div> <div class="tab-pane fade show active" id="screen" role="tabpanel" aria-labelledby="screen-tab"> <div class="container"> <div class="row justify-content-between"> <div class="col-lg-7"><span class="jumboMile">Genetic Screening</span></div> <div class="col-lg-3 text-right"> </div> </div> <div class="row"> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking. I am dead inside what do you feel you would bring to the table if you were hired for this position, nor cannibalize, or pipeline, for get all your ducks in a row.</p> </div> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking. I am dead inside what do you feel you would bring to the table if you were hired for this position, nor cannibalize, or pipeline, for get all your ducks in a row.</p> </div> </div> <.-- /Row--> </div> </div> <div class="tab-pane fade" id="pen" role="tabpanel" aria-labelledby="pen-tab"> <div class="container"> <div class="row justify-content-between"> <div class="col-lg-7"><span class="jumboMile">Penicillin</span></div> </div> <div class="row"> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking, I am dead inside what do you feel you would bring to the table if you were hired for this position, nor cannibalize, or pipeline. for get all your ducks in a row.</p> </div> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking, I am dead inside what do you feel you would bring to the table if you were hired for this position, nor cannibalize, or pipeline. for get all your ducks in a row.</p> </div> </div> <,-- /Row--> <div class="row"> <div class="col-12 pb-2"> </div> </div> <div class="row"> <div class="col-12 pb-2"> </div> </div> <div class="row"> <div class="col-12"> </div> </div> </div> </div> <div class="tab-pane fade" id="immun" role="tabpanel" aria-labelledby="immun-tab"> <div class="container"> <div class="row justify-content-between"> <div class="col-lg-7"><span class="jumboMile">Immunizations</span></div> </div> <div class="row"> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking, I am dead inside what do you feel you would bring to the table if you were hired for this position, nor cannibalize. or pipeline. for get all your ducks in a row,</p> </div> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking, I am dead inside what do you feel you would bring to the table if you were hired for this position, nor cannibalize. or pipeline. for get all your ducks in a row.</p> </div> </div> <.-- /Row--> <div class="row"> <div class="col-12 pb-2"> <div class="jumboQ"> <span class="jumboSub">Laura | Age 7 | SS</span> <p>"Open door policy draw a line in the sand. Back of the net low hanging fruit. Product market fit, Streamline forcing function accountable talk at the end of the day,"</p> </div> </div> </div> <div class="row"> <div class="col-12 pb-2"> </div> </div> <div class="row"> <div class="col-12"> </div> </div> </div> </div> <div class="tab-pane fade" id="hu" role="tabpanel" aria-labelledby="hu-tab"> <div class="container"> <div class="row justify-content-between"> <div class="col-lg-7"><span class="jumboMile">Hydroxyurea</span></div> </div> <div class="row"> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking, I am dead inside what do you feel you would bring to the table if you were hired for this position. nor cannibalize. or pipeline, for get all your ducks in a row,</p> </div> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking, I am dead inside what do you feel you would bring to the table if you were hired for this position. nor cannibalize. or pipeline, for get all your ducks in a row,</p> </div> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking, I am dead inside what do you feel you would bring to the table if you were hired for this position. nor cannibalize. or pipeline, for get all your ducks in a row,</p> </div> </div> <,-- /Row--> <div class="row"> <div class="col-12 pb-2"> </div> </div> <div class="row"> <div class="col-12 pb-2"> </div> </div> <div class="row"> <div class="col-12 pb-2"> </div> </div> </div> </div> <div class="tab-pane fade" id="tcd" role="tabpanel" aria-labelledby="tcd-tab"> <div class="container"> <div class="row justify-content-between"> <div class="col-lg-7"><span class="jumboMile">TCD</span></div> </div> <div class="row"> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking. I am dead inside what do you feel you would bring to the table if you were hired for this position. nor cannibalize, or pipeline, for get all your ducks in a row,</p> </div> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking. I am dead inside what do you feel you would bring to the table if you were hired for this position. nor cannibalize, or pipeline, for get all your ducks in a row,</p> </div> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking. I am dead inside what do you feel you would bring to the table if you were hired for this position. nor cannibalize. or pipeline. for get all your ducks in a row.</p> </div> </div> <.-- /Row--> <div class="row"> <div class="col-12 pb-2"> <div class="jumboQ"> <span class="jumboSub">Laura | Age 7 | SS</span> <p>"Open door policy draw a line in the sand, Back of the net low hanging fruit, Product market fit, Streamline forcing function accountable talk at the end of the day."</p> </div> </div> </div> <div class="row"> <div class="col-12 pb-2"> </div> </div> <div class="row"> <div class="col-12"> </div> </div> </div> </div> <div class="tab-pane fade" id="day" role="tabpanel" aria-labelledby="day-tab"> <div class="container"> <div class="row justify-content-between"> <div class="col-lg-7"><span class="jumboMile">Starting Daycare</span></div> </div> <div class="row"> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking. I am dead inside what do you feel you would bring to the table if you were hired for this position, nor cannibalize, or pipeline, for get all your ducks in a row.</p> </div> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking. I am dead inside what do you feel you would bring to the table if you were hired for this position, nor cannibalize, or pipeline, for get all your ducks in a row.</p> </div> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking. I am dead inside what do you feel you would bring to the table if you were hired for this position. nor cannibalize. or pipeline. for get all your ducks in a row.</p> </div> </div> <,-- /Row--> <div class="row"> <div class="col-12 pb-2"> <div class="jumboQ"> <span class="jumboSub">Laura | Age 7 | SS</span> <p>"Open door policy draw a line in the sand, Back of the net low hanging fruit, Product market fit. Streamline forcing function accountable talk at the end of the day."</p> </div> </div> </div> <div class="row"> <div class="col-12 pb-2"> </div> </div> <div class="row"> </div> </div> </div> </div> <div class="tab-pane fade" id="mri" role="tabpanel" aria-labelledby="mri-tab"> <div class="container"> <div class="row justify-content-between"> <div class="col-lg-7"><span class="jumboMile">MRI's and Neuropsych Testing</span></div> </div> <div class="row"> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking, I am dead inside what do you feel you would bring to the table if you were hired for this position, nor cannibalize, or pipeline. for get all your ducks in a row.</p> </div> </div> <,-- /Row--> <div class="row"> <div class="col-12 pb-2"> </div> </div> <div class="row"> </div> <div class="row"> </div> </div> </div> <div class="tab-pane fade" id="school" role="tabpanel" aria-labelledby="school-tab"> <div class="container"> <div class="row justify-content-between"> <div class="col-lg-7"><span class="jumboMile">Starting School</span></div> </div> <div class="row"> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking, I am dead inside what do you feel you would bring to the table if you were hired for this position, nor cannibalize. or pipeline. for get all your ducks in a row,</p> </div> </div> <,-- /Row--> <div class="row"> </div> <div class="row"> </div> </div> </div> <div class="tab-pane fade" id="sports" role="tabpanel" aria-labelledby="sport-tab"> <div class="container"> <div class="row justify-content-between"> <div class="col-lg-7"><span class="jumboMile">Starting Sports</span></div> </div> <div class="row"> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking, I am dead inside what do you feel you would bring to the table if you were hired for this position. nor cannibalize. or pipeline. for get all your ducks in a row.</p> </div> </div> <.-- /Row--> <div class="row"> <div class="col-12 pb-2"> </div> </div> <div class="row"> <div class="col-12 pb-2"> </div> </div> </div> </div> <div class="tab-pane fade" id="trans" role="tabpanel" aria-labelledby="trans-tab"> <div class="container"> <div class="row justify-content-between"> <div class="col-lg-9"><span class="jumboMile">Eventual Transition From Pediatric Care</span></div> </div> <div class="row"> <div class="col-lg-4"> <span class="jumboSub">Lorem</span> <p>Blue sky thinking. I am dead inside what do you feel you would bring to the table if you were hired for this position, nor cannibalize, or pipeline, for get all your ducks in a row.</p> </div> </div> <!-- /Row--> <div class="row"> <div class="col-12"> <div class="jumboQ"> <span class="jumboSub">Laura | Age 7 | SS</span> <p>"Open door policy draw a line in the sand. Back of the net low hanging fruit. Product market fit. Streamline forcing function accountable talk at the end of the day."</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section>

So it will be much easier to check for the first nav-link active class instead of check the #screen element

$(document).ready(function() {
  $('.btnRew').hide();
  
  $('.btnFw').click(function() {
    $('.nav-link.active').parent().next('li').find('a').trigger('click');
    checky();
  });
  
  $('.btnRew').click(function() {
    $('.nav-link.active').parent().prev('li').find('a').trigger('click');
    checky();
  });
  
 
});

function checky() {
    if ($(".nav-tabs .nav-link:eq(0)").hasClass('active')) {
      console.log('its active');
      $('.btnRew').hide();
    } else {
      console.log('not active');
      $('.btnRew').show();
    }
    
  }