【发布时间】：2021-01-07 19:09:16
【问题描述】：
$(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 按钮后，这再次起作用，但在第一次之后就不行了。
【问题讨论】：
标签： javascript jquery class click