javascript - 查找 tab li 是否有活动类
问题描述
$(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>我正在尝试确定该选项卡是否处于活动状态。单击两次按钮后，我可以让它工作，但不是第一次。就像我的代码一样，它没有注册第一次点击。我正在尝试确定liID 为的第一个screen是否处于活动状态。如果是，我想隐藏btnRew按钮。这在我单击按钮两次后再次起作用btnFw，但不是在第一次之后。
解决方案
if (document.getElementById("screen").classList.contains('active')) {
console.log('its active');
$('.btnRew').hide();
}
请尝试此操作以检查您的 id 为“screen”的元素是否具有“活动”类。
推荐阅读
- ios - 无法访问容器包中的应用程序文件
- python - 语法错误：文件“....”中以 \xe0 开头的非 UTF-8 代码，但未声明编码
- r - 以变量的值成为变量名称并且它们的值从另一列中选取的方式重塑数据集
- python - 使用 Pandas python 将表作为响应存储到 DataFrame
- reactjs - 在同一个组件中调用 useQuery() 2 次会导致其中一个失败
- r - 在 R 中读取和写入 CSV 文件
- macos - 无法使用蓝牙从官方 Lego 应用程序中连接到 Lego Mindstorms Robot Inventor 51515
- php - 为什么我的正确连接尝试在 apache2 下失败但在 cli 下失败？
- leaflet - 在传单绘制中绘制多边形后获取所有多边形或图层详细信息
- javascript - 如果代码跳过宏任务，回调函数的目的是什么？