gpt4 book ai didi

javascript - 动态更改 Bootstrap 进度条

转载 作者:数据小太阳 更新时间:2023-10-29 05:02:25 25 4
gpt4 key购买 nike

我有以下 HTML 代码,使用 Bootstrap:

<div class="progress">
<div class="progress-bar progress-bar-striped active" id="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
</div>
</div>

我希望 style="width: 0" 增加到 100%。我尝试使用下面的代码作为测试,但没有任何反应。

<head>
<title>Verifying Oracle database...</title>

<script src="ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

<script>

$(document).ready(function() {
$("#progress-bar").css("width", "50%");
$("#progress-bar").attr("aria-valuenow", "50%");
});

</script>

</head>

有人可以帮助实现这一进展吗?

提前致谢。

最佳答案

您用来更新宽度的代码是正确的,但正如@Brennan 指出的那样,它必须在进度条呈现后运行 - 例如通过将脚本标记放在进度条标记之后 ( fiddle ) 或在文档就绪处理程序 ( fiddle ) 中运行它。

以下是执行您尝试的操作的最小版本( fiddle 模拟从 0 到 100 运行的进度):

$(function() {
$("#progress-bar").css("width", "50%");
});

关于代码的另一个注意事项:随着进度条的宽度,您应该更新 aria-valuenow attribute它表示辅助技术浏览器的范围小部件(此处为进度条)的当前值。在您的样本中,aria-valuenow 为 45,但宽度为 0,这是不一致的。

关于javascript - 动态更改 Bootstrap 进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26432408/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com