problem description

found a wizard plug-in code written by a foreigner about bootstrapWizard. He couldn"t understand the usage and looked confused. Baidu others can understand the writing, his usage, how to understand the operating principle. Ask the great god for an answer.

the environmental background of the problems and what methods you have tried

find the sample site. http://vinceg.github.io/twitt. has no similar code.
my Baidu keyword "bootstrapWizard data-option" does not have this usage either.

related codes

/ / Please paste the code text below (do not replace the code with pictures)
< form id= "form" data-plugin= "parsley" data-option= "{}" >

      <div id="rootwizard" data-plugin="bootstrapWizard" data-option="{
        nextSelector: ".button-next",
        previousSelector: ".button-previous",
        firstSelector: ".button-first",
        lastSelector: ".button-last",
        onTabClick: function(tab, navigation, index) {
          return false;
        },
        onNext: function(tab, navigation, index) {
          var instance = $("-sharpform").parsley();
          instance.validate();
          if(!instance.isValid()) {
            return false;
          }
        }
      }">
        <ul class="nav nav-pills mb-3">
          <li class="nav-item"><a class="nav-link" href="-sharptab1" data-toggle="tab">First</a></li>
          <li class="nav-item"><a class="nav-link" href="-sharptab2" data-toggle="tab">Second</a></li>
          <li class="nav-item"><a class="nav-link" href="-sharptab3" data-toggle="tab">Third</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="tab1">
              <div class="form-group">
                <label>Username</label>
                <input type="text" class="form-control" required>                        
              </div>
              <div class="form-group">
                <label>Email</label>
                <input type="email" class="form-control" required>                        
              </div>
              <div class="row m-b">
                <div class="col-sm-6">
                  <label>Enter password</label>
                  <input type="password" class="form-control" required id="pwd">   
                </div>
                <div class="col-sm-6">
                  <label>Confirm password</label>
                  <input type="password" class="form-control" data-parsley-equalto="-sharppwd" required>      
                </div>   
              </div>
              <div class="form-group">
                <label>Phone</label>
                <input type="number" class="form-control" placeholder="XXX XXXX XXX" required>
              </div>
              <div class="checkbox">
                <label class="ui-check">
                  <input type="checkbox" name="check" checked required="true"><i></i> I agree to the <a href="-sharp" class="text-info">Terms of Service</a>
                </label>
              </div>
            </div>
            <div class="tab-pane" id="tab2">
              <div class="form-group">
                <label>URL</label>
                <input type="url" class="form-control">
              </div>
            </div>
            <div class="tab-pane" id="tab3">
              <div class="form-group">
                
Finished
              </div>
            </div>
            <div class="row py-3">
              <div class="col-6">
                <a href="-sharp" class="btn white button-next">First</a>
                <a href="-sharp" class="btn white button-previous">Previous</a>
              </div>
              <div class="col-6">
                <div class="d-flex justify-content-end">
                  <a href="-sharp" class="btn white button-next">Next</a>
                  <a href="-sharp" class="btn white button-last">Last</a>
                </div>
              </div>
            </div>
        </div>  
      </div>
    </form>

< script src= ".. / libs/jquery/dist/jquery.min.js" > < / script >

< script src= ".. / libs/popper.js/dist/umd/popper.min.js" > < / script >
< script src= ".. / libs/bootstrap/dist/js/bootstrap.min.js" > < / script >

< script src= ".. / libs/pace-progress/pace .min.js "> < / script >
< script src=".. / libs/pjax/pjax.js "> < / script >

< script src= "scripts/lazyload.config.js" >
< script src= "scripts/lazyload.js" > < / script >
< script src= "scripts/plugin.js" > < / script >
< script src= "scripts/nav.js" > < / script >
< script src= "scripts/scrollto.js" > < / script >
< script src= "scripts/toggleclass.js" > < / script >
< script src= "scripts/theme.js" > < / script >
< script src= "scripts/ajax.js" > < / script >
< scripts rc= "scripts/app.js" > < / script >
. / libs/parsleyjs/dist/parsley.min.js "> < / script >
< script src=".. / libs/twitter-bootstrap-wizard/jquery.bootstrap.wizard.min.js "> < / script >

what result do you expect? What is the error message actually seen?

< div id= "rootwizard" data-plugin= "bootstrapWizard" data-option.
Why do you put a data-option, data-option in this div attribute and there is a pile of js code under it? why is js written here? it hasn"t been run with js"s < script > < / script > yet. How it works, I use F12, I can"t give this js code, debug location, can"t track it. I hope God will inculcate me, educate me and educate me.