所以我一直在绞尽脑汁和谷歌搜索技巧,我已经开始寻找一个简单的答案。我找到了一个替代解决方案来实现我想要实现的目标,但令我困扰的是,我最初尝试做的事情无论我做什么都不起作用。
这就是我所拥有的我有一个引导进度条和引导导航丸 - 使用图像、 进度条和选项卡显示以提供视觉辅助
我是个新手,我确实在 JavaScript 和 jQuery 的差异之间挣扎,但不介意使用其中任何一个,如果我混合和匹配,抱歉。
** 我没有将类设置为活动状态 - 我假设引导程序会设置 ** 当在浏览器中检查时,活动类在选择时会从一个选项卡更改为另一个选项卡。我想要一个函数来检查它是否存在并根据所选选项卡增加进度条的宽度。
我有一个解决方案,但我想知道为什么这些都不起作用(如果您想要该解决方案,我可以编辑并分享演示)
调用我尝试过的课程:
$().hasClass
$().className
$().classList.contains
获取我尝试过的类需要检查的元素
getElementById
document.querySelector
const pill1 = $()
const pill1 = getElementbyID
const pill = document.querySelector
只是运气不好而已
<div class="container">
<!-- PROGRESS BAR -->
<div class="progress">
<div id="progressbar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:10%">
</div>
</div>
<!-- PROGRESS BAR END -->
</div>
$(document).ready(function () {
$(".nav-item").click(progress());
});
function steps() {
const element = document.getElementById("#progressbar");
if ($("pills-contactDetails-tab").hasClass(".active")) {
element.style.width = "0%";
}
else if ($("#pills-FAQ1-tab").hasClass(".active")) {
element.style.width = "9.1%";
}
else if ($("#pills-FAQ2-tab").hasClass(".active")) {
element.style.width ="18.2%";
}
else if ($("#pills-FAQ3-tab").hasClass(".active")) {
element.style.width ="27.3%";
}
}
忽然笑
相关分类