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

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() {
  $('#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

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

        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="

        crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>

<script>

  $( document ).ready(function() {

    $('#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>