javascript - 如何处理 html5 中的向导进度条？

Question

我想实现基于前进后退的section进度条动画

考虑我有四个部分，每个部分都有前进和后退按钮，在第 1 部分填写详细信息后单击下一步，进度条增加 25%，现在转到第 2 部分，在填写详细信息后单击下一步，它应该增加 50%。

在第 2 节的同一情况下，如果我从第 2 节向后单击，它会同时转到第 1 节，我有向前和向后移动按钮，对于这种情况，进度条也需要减少 25% 是否有任何预定义的库可用或有更好的方法来处理这个问题

 <div class="row hidden-xs name-progress-bar" style="margin-top:-15px">
                    <div class="col-md-12">
                        <div class="progress" id="progress1">
                            <div class="progress-bar" data-progress1 = "0" id="myBar" role="progressbar"  aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                        <div class="progress" id="progress2">
                            <div class="progress-bar2" data-progress2 = "0" id="myBar2" role="progressbar"  aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                    </div>
                    <div class="progress-group col-md-12">
                        <div class="custom-name-progress-bar" [style.width.%]="constWidth" *ngFor="let configData of progressBarConfig | objectToArray">
                            <button class="progress-button">{{configData.name}}</button>
                        </div>
                    </div>
                </div>

jQuery:

 static activeProgressBar(){
        var total = 4;
        var current = parseInt(jQuery('.page-heading-mobile').attr('data-step'));
        var average  = (current/total)*100
        //var average = (100/totalSection);
        var active= parseInt(jQuery('.progress-bar').attr('data-progress1'));
        active = active + average;
        var activePercent = active + '%';
        var progress = jQuery('.progress-bar');
        jQuery('.progress-bar').attr('data-progress1',active);
        progress.css('width',activePercent);
    }

    static completedProgressBar(){
        var total = 4;    
        var current = parseInt(jQuery('.page-heading-mobile').attr('data-step'));
        var average  = (current/total)*100
        //var average = (100/totalSection);
        var active = parseInt(jQuery('.progress-bar2').attr('data-progress2'));
        active = active + average;
        var activePercent = active + '%';
        var progress = jQuery('.progress-bar2');
        jQuery('.progress-bar2').attr('data-progress2',active);
        progress.css('width',activePercent);
    }

我有两个进度条处于事件状态并与两种不同的颜色竞争

返回继续

Answer 1

//HTML    

<progress max="100" value="0" id="progressBar"></progress>
    <div id="tabs">
    <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>

    </ul>
    <div id="tabs-1">
      <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
    <div id="tabs-2">
      <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
    <div id="tabs-3">
      <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>

    </div>
    <div id="tabs-4">
      <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>

    </div>

    <div class="button-container">
      <button id="back">Back</button>
      <button id="saveContinue">Save &amp; Continue</button>
    </div>
    </div>

//Script

$(function() {
  $("#tabs").tabs();
  var countOfTabs = $("#tabs li").length;
  var slotValue = 100/countOfTabs;

  $("#saveContinue").on("click", function() {
    var currentTab = $("#tabs").tabs('option', 'active');
    currentTab++;
    $("#tabs").tabs({
          active: currentTab 
      });

       if(currentTab==0){
            currentTab = 1;
          }
      for(i=1;i<=currentTab;i++){
        if(i==currentTab){

          var finalVal = slotValue*i;
            $("#progressBar").attr("value", finalVal);
        }
      }

  });

  $("#back").on("click", function() {
  var currentTab = $("#tabs").tabs('option', 'active');

      if(currentTab==0){
        $("#progressBar").attr("value", "0");
      }else{
        $("#tabs").tabs({
          active: currentTab - 1
        });
      }
        for(i=1;i<=currentTab;i++){
        if(i==currentTab){
         i--;
          var finalVal = slotValue*i;
            $("#progressBar").attr("value", finalVal);
            break;
        }
      }

  });



});

//CSS

  .button-container{text-align: center;}
#progressBar{
  width: 100%;
}