首頁猿問通過檢查 Class...

通過檢查 Class .active 來增加進度條的寬度

Html5

慕的地6264312 2023-10-24 19:52:32

所以我一直在絞盡腦汁和谷歌搜索技巧，我已經開始尋找一個簡單的答案。我找到了一個替代解決方案來實現我想要實現的目標，但令我困擾的是，我最初嘗試做的事情無論我做什么都不起作用。這就是我所擁有的我有一個引導進度條和引導導航丸 - 使用圖像、進度條和選項卡顯示以提供視覺輔助我是個新手，我確實在 JavaScript 和 jQuery 的差異之間掙扎，但不介意使用其中任何一個，如果我混合和匹配，抱歉。** 我沒有將類設置為活動狀態 - 我假設引導程序會設置 ** 當在瀏覽器中檢查時，活動類在選擇時會從一個選項卡更改為另一個選項卡。我想要一個函數來檢查它是否存在并根據所選選項卡增加進度條的寬度。我有一個解決方案，但我想知道為什么這些都不起作用（如果您想要該解決方案，我可以編輯并分享演示）調用我嘗試過的課程：$().hasClass$().className$().classList.contains獲取我嘗試過的類需要檢查的元素getElementByIddocument.querySelector const pill1 = $()const pill1 = getElementbyIDconst pill = document.querySelector只是運氣不好而已 <div class="container">  <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> $(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%"; }}

查看完整描述

1 回答

忽然笑

TA貢獻1806條經驗獲得超5個贊

因此，您可以使用選項卡上的 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%";

}

</div>

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

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

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

反對回復 2023-10-24

1 回答
0 關注
112 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

通過檢查 Class .active 來增加進度條的寬度

通過檢查 Class .active 來增加進度條的寬度

1 回答

添加回答