通过检查 Class .active 来增加进度条的宽度

Question

所以我一直在绞尽脑汁和谷歌搜索技巧，我已经开始寻找一个简单的答案。我找到了一个替代解决方案来实现我想要实现的目标，但令我困扰的是，我最初尝试做的事情无论我做什么都不起作用。这就是我所拥有的我有一个引导进度条和引导导航丸 - 使用图像、 进度条和选项卡显示以提供视觉辅助我是个新手，我确实在 JavaScript 和 jQuery 的差异之间挣扎，但不介意使用其中任何一个，如果我混合和匹配，抱歉。** 我没有将类设置为活动状态 - 我假设引导程序会设置 ** 当在浏览器中检查时，活动类在选择时会从一个选项卡更改为另一个选项卡。我想要一个函数来检查它是否存在并根据所选选项卡增加进度条的宽度。我有一个解决方案，但我想知道为什么这些都不起作用（如果您想要该解决方案，我可以编辑并分享演示）调用我尝试过的课程：$().hasClass$().className$().classList.contains获取我尝试过的类需要检查的元素getElementByIddocument.querySelector const pill1 = $()const pill1 = getElementbyIDconst 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%";    }}

Answer 1

因此，您可以使用选项卡上的 show 事件来更改进度条。元素变量也为空，因为它有“#progressbar”而不是“progressbar”。下面的示例应该适合您。

我建议稍后将 if elseif elseif 更改为 switch 语句。

$(document).ready(function() {

//  $(".nav-item").click(progress());

  $(".nav-link[data-toggle=pill]").on('shown.bs.tab', function(e) {

    e.target // newly activated tab

    e.relatedTarget // previous active tab

    var activeTabId = $(e.target).parent().attr('id');

      console.log(activeTabId);

     var element = document.getElementById("progressbar");

  if (activeTabId == "pills-contactDetails-tab") {

    element.style.width = "0%";

  } else if ( activeTabId == "pills-FAQ1-tab") {

    element.style.width = "9.1%";

  } else if (activeTabId == "pills-FAQ2-tab") {

    element.style.width = "18.2%";

  } else if (activeTabId == "pills-FAQ3-tab") {

    element.style.width = "27.3%";

  }

  })

});

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%";

  }

}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

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

<div id="tabs" class="container">

            <!-- TABS -->

        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">

            <li id="pills-contactDetails-tab" class="nav-item">

                <a class="nav-link active" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="true">Contact Details</a>

            </li>

            <li id="pills-FAQ1-tab" class="nav-item">

                <a class="nav-link" data-toggle="pill" href="#pills-FAQ1" role="tab" aria-controls="pills-FAQ1" aria-selected="false">FAQ 1</a>

            </li>

            <li id="pills-FAQ2-tab" class="nav-item">

                <a class="nav-link"  data-toggle="pill" href="#pills-FAQ2" role="tab" aria-controls="pills-FAQ2" aria-selected="false">FAQ 2</a>

            </li>

            <li id="pills-FAQ3-tab" class="nav-item">

                <a class="nav-link" data-toggle="pill" href="#pills-FAQ3" role="tab" aria-controls="pills-FAQ3" aria-selected="false">FAQ 3</a>

            </li>

            <li id="pills-FAQ4-tab" class="nav-item">

                <a class="nav-link" data-toggle="pill" href="#pills-FAQ4" role="tab" aria-controls="pills-FAQ4" aria-selected="false">FAQ 4</a>

            </li>

            <li id="pills-FAQ5-tab" class="nav-item">

                <a class="nav-link" data-toggle="pill" href="#pills-FAQ5" role="tab" aria-controls="pills-FAQ5" aria-selected="false">FAQ 5</a>

            </li>

            <li id="pills-FAQ6-tab" class="nav-item">

                <a class="nav-link" data-toggle="pill" href="#pills-FAQ6" role="tab" aria-controls="pills-FAQ6" aria-selected="false">FAQ 6</a>

            </li>

            <li id="pills-FAQ7-tab" class="nav-item">

                <a class="nav-link" data-toggle="pill" href="#pills-FAQ7" role="tab" aria-controls="pills-FAQ7" aria-selected="false">FAQ 7</a>

            </li>

            <li id="pills-FAQ8-tab" class="nav-item">

                <a class="nav-link" data-toggle="pill" href="#pills-FAQ8" role="tab" aria-controls="pills-FAQ8" aria-selected="false">FAQ 8</a>

            </li>

            <li id="pills-FAQ9-tab" class="nav-item">

                <a class="nav-link" data-toggle="pill" href="#pills-FAQ9" role="tab" aria-controls="pills-FAQ9" aria-selected="false">FAQ 9</a>

            </li>

            <li id="pills-requestCallBack-tab" class="nav-item">

                <a class="nav-link" data-toggle="pill" href="#pills-request" role="tab" aria-controls="pills-requestCallBack" aria-selected="false">Request Callback</a>

            </li>

        </ul>

        <div class="tab-content" id="pills-tabContent">

            <div class="tab-pane fade show active" id="pills-contact" role="tabpanel" aria-labelledby="pills-contactDetails-tab">1</div>

            <div class="tab-pane fade" id="pills-FAQ1" role="tabpanel" aria-labelledby="pills-FAQ1-tab">2</div>

            <div class="tab-pane fade" id="pills-FAQ2" role="tabpanel" aria-labelledby="pills-FAQ2-tab">3</div>

            <div class="tab-pane fade" id="pills-FAQ3" role="tabpanel" aria-labelledby="pills-FAQ3-tab">4</div>

            <div class="tab-pane fade" id="pills-FAQ4" role="tabpanel" aria-labelledby="pills-FAQ4-tab">5</div>

            <div class="tab-pane fade" id="pills-FAQ5" role="tabpanel" aria-labelledby="pills-FAQ5-tab">6</div>

            <div class="tab-pane fade" id="pills-FAQ6" role="tabpanel" aria-labelledby="pills-FAQ6-tab">7</div>

            <div class="tab-pane fade" id="pills-FAQ7" role="tabpanel" aria-labelledby="pills-FAQ7-tab">8</div>

            <div class="tab-pane fade" id="pills-FAQ8" role="tabpanel" aria-labelledby="pills-FAQ8-tab">9</div>

            <div class="tab-pane fade" id="pills-FAQ9" role="tabpanel" aria-labelledby="pills-FAQ9-tab">10</div>

            <div class="tab-pane fade" id="pills-request" role="tabpanel" aria-labelledby="pills-requestCallBack-tab">11</div>

        </div>

    </div>