html - 如何减少条件状态/进度条交付的代码

Question

我从数据库收到一个状态，我想为我的步骤进度条制作或减少这个重复的代码。响应中的状态可以是：例如 1,2,3,4,5，我想更改我的<li>标签的活动类以获得此：我正在为第三步执行此操作：IMG HERE https:// ibb.co/8zKg097

if(state == 1){
 <section class="progressSection">
      <div class="container">
        <ul class="progressbar" style="list-style-type:none;">
          <li class="active">Alta Encargo</li>
          <li >Confeccion técnico</li>
          <li>Supervisión</li>
          <li>Pdte. Generar Imp. </li>
          <li>Salida</li>
        </ul>
      </div>
    </section>
} else if(state == 2){
  <section class="progressSection">
      <div class="container">
        <ul class="progressbar" style="list-style-type:none;">
          <li class="active">Alta Encargo</li>
          <li class="active">Confeccion técnico</li>
          <li>Supervisión</li>
          <li>Pdte. Generar Imp. </li>
          <li>Salida</li>
        </ul>
      </div>
    </section>
} else if {
  <section class="progressSection">
      <div class="container">
        <ul class="progressbar" style="list-style-type:none;">
          <li class="active">Alta Encargo</li>
          <li class="active">Confeccion técnico</li>
          <li class="active">Supervisión</li>
          <li>Pdte. Generar Imp. </li>
          <li>Salida</li>
        </ul>
      </div>
    </section>
} 

...（续5个条件）

如您所见，我正在手动添加所有活动类，我认为有更好的方法来减少/构造我的代码，当然，如果有任何建议，我将不胜感激。对不起我的英语，提前谢谢你。

标签： htmlif-statementejs