Smart Wizard jQuery插件Square主题进度条无法显示求助

DevOps 小满

2026-7-26

Smart Wizard square主题进度条不显示的解决方法

解决这个进度条不显示的问题，你可以按下面的步骤排查：

核对插件版本与CSS文件一致性
确保你引入的Smart Wizard JS和对应主题CSS是同一版本，不同版本的样式类名或结构可能不一样，比如v5的square主题CSS路径一般是smart-wizard/dist/css/smart_wizard_theme_square.min.css，别错用成其他版本的文件。

检查进度条配置是否开启
有些版本的插件默认不显示进度条，你需要在配置里显式添加showProgressBar: true，补充后的配置示例：

selected: 0,
theme: 'square',
justified: true,
showProgressBar: true, // 新增这行开启进度条
autoAdjustHeight: true,
backButtonSupport: true,
enableUrlHash: true,
transition: {
  animation: 'fade',
  speed: '400',
  easing: '',
  prefixCss: '',
  fwdShowCss: '',
  fwdHideCss: '',
  bckShowCss: '',
  bckHideCss: ''
}

验证CSS是否正确加载
按F12打开开发者工具，切换到「元素」面板，找到进度条对应的元素（通常带.sw-progress类），查看右侧「样式」面板：
- 如果看不到该元素，说明插件没正确渲染进度条，检查HTML结构是否符合插件要求；
- 如果元素存在但样式里display: none或者没有背景、宽度属性，说明CSS文件没加载成功，检查文件路径是否正确，或者有没有被其他样式覆盖。

检查HTML结构合规性
插件要求的基础结构必须正确，示例如下：

<div id="smartwizard">
  <ul class="sw-nav nav-tabs">
    <li><a href="#step-1">步骤1</a></li>
    <li><a href="#step-2">步骤2</a></li>
    <li><a href="#step-3">步骤3</a></li>
  </ul>
  <div class="sw-container">
    <div id="step-1" class="sw-content">...</div>
    <div id="step-2" class="sw-content">...</div>
    <div id="step-3" class="sw-content">...</div>
  </div>
</div>

结构不对的话，插件可能无法正常生成进度条。