Question

我有以下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>

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

提前致谢。

Answer 1

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

以下是您尝试过的最小版本（小提琴模拟从0到100的进度）：

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

关于代码的另一个注释：除了进度条的宽度之外，您还应该更新aria-valuenow attribute，它代表辅助技术浏览器的范围小部件（此处为进度条）的当前值。在你的样本中，你有aria-valuenow 45但宽度为0，这是不一致的。

动态更改Bootstrap进度条

1 个答案: