语义UI进度栏将不会初始化

问题描述 投票:2回答:1

我最近一直在设计自己的网站,但在使用语义UI进度栏时陷入困境。我到处都在寻找不同的方法,甚至直接复制了语义示例,但它仍然无法正常工作。它显示的只是一个蓝绿色进度条,每次都有相同的进度。有什么想法吗?在此先感谢

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test</title>
<link rel ="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" type="text/css">
</head>
<body>
  <div class="ui teal progress" id="example2">
    <div class="bar"></div>
    <div class="label">22% Earned</div>
  </div>
<script>
  $('#example2').progress({
  percent: 22
  });
</script>
</body>
</html>
javascript html semantic-ui
1个回答
0
投票

我只是拿走了您的代码,并包含了缺少但必需的库(jQuery和语义UI)。现在可以了:)

$('#example2').progress({
  percent: 22
  });
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test</title>
<link rel ="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</head>
<body>
  <div class="ui teal progress" id="example2">
    <div class="bar"></div>
    <div class="label">22% Earned</div>
  </div>
</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.