查找 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>

我正在尝试确定该选项卡是否处于活动状态。 单击两次按钮后，我可以让它工作，但不是第一次。 就像我的代码一样，它没有注册第一次点击。 我正在尝试确定 ID 为screen的第一个li是否处于活动状态。 如果是，我想隐藏btnRew按钮。 在我单击btnFw按钮两次之后，这再次起作用，但在第一次之后就不行了。

Answer 1

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

请尝试此操作以检查您的 id 为“screen”的元素是否具有 class“活动”。

Answer 2

让我解释一下..带有#的a需要几毫秒/秒才能生效，人眼可能不会注意到它，但仍然有延迟来执行操作..如果您使用setTimeout()就像下一个例子一样，你会明白的

 $(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>

因此，检查第一个nav-link活动 class 而不是检查#screen元素会容易得多

$(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();
    }
    
  }