进度条未填充进度条脚本标记

Question

预期的结果是，当页面加载时，进度条加载如下：https: //i.stack.imgur.com/xThgR.png

然而我得到的结果是一个没有进度的进度条，如下所示：https: //i.stack.imgur.com/vH9oh.png

下面列出了 jQuery 和语义/语义 UI 库的链接：

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">

    <script

        src="https://code.jquery.com/jquery-3.1.1.min.js"

        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="

        crossorigin="anonymous"></script>

    <script src="semantic/dist/semantic.min.js"></script>

    <script>

        $('#progressHTML').progress();

    </script>

网站中具有进度条的实际区域如下：

<div id="skills" class="skills-containter">

        <div class="skills-text-containter">

            <h1 class="ui header skills-header">Skills</h1>

            <div class="ui blue progress" data-percent="74" id="progressHTML">

                <div class="bar"></div>

                <div class="label">HTML</div>

              </div>

            <p class="ui paragraph skills-paragraph">no</p>

        </div>

    </div>

任何帮助，将不胜感激。:)

Answer 1

您忘记添加$('#progressHTML').progress();jQuery 的就绪事件，如下所示：$(document).ready(function()&nbsp;{ &nbsp;&nbsp;$('#progressHTML').progress(); });一个例子是在我制作的 codepen 中工作：https://codepen.io/mayconmesquita/pen/YzyGvVN代码：<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"><script&nbsp; &nbsp; &nbsp; &nbsp; src="https://code.jquery.com/jquery-3.1.1.min.js"&nbsp; &nbsp; &nbsp; &nbsp; integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="&nbsp; &nbsp; &nbsp; &nbsp; crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script><script>&nbsp; $( document ).ready(function() {&nbsp; &nbsp; $('#progressHTML').progress();&nbsp; });</script><div id="skills" class="skills-containter">&nbsp; <div class="skills-text-containter">&nbsp; &nbsp; <h1 class="ui header skills-header">Skills</h1>&nbsp; &nbsp; <div class="ui blue progress" data-percent="74" id="progressHTML">&nbsp; &nbsp; &nbsp; <div class="bar"></div>&nbsp; &nbsp; &nbsp; <div class="label">HTML</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <p class="ui paragraph skills-paragraph">no</p>&nbsp; </div></div>