如何使用下一步按钮将步骤向导链接到菜单

Question

我有一个带有子菜单的垂直菜单，我的菜单是逐步的形式。 每次我单击下一步按钮时，向导都必须转到下一步，还必须转到下一个菜单列表。 我的菜单列表中还包含该表单页面的href。

例如：第1步是称为“卡车”的菜单，“卡车”页面打开。第2步是称为“日期”的菜单，打开日期页面。

 $(document).ready(function() { //Initialize tooltips //$('.nav-tabs > li a[title]').tooltip(); //Wizard $('a[data-toggle="tab"]').on('show.bs.tab', function(e) { var $target = $(e.target); if ($target.parent().hasClass('disabled')) { return false; } }); $(".next").click(function(e) { var $active = $('.wizard .nav-tabs li.active'); $active.next().removeClass('disabled'); nextTab($active); }); }); function nextTab(elem) { $(elem).next().find('a[data-toggle="tab"]').click(); } 

 /* MENU */ ul { list-style: none; padding: 0; margin: 0; } @media (min-width: 768px) { .menu { width: 72.5%; left: 100px; border: 1px solid #129cf3; position: absolute; background-color: #f2f2f2; font: 18px 'Raleway', sans-serif; text-align: center; text-decoration: none; border-collapse: collapse; top: 250px; font-weight: 600; border-bottom: none; transition: all 1s; box-shadow: 10px 10px 5px #888888; } .menu li { list-style: none; text-decoration: none; } } .menu a { color: #000; left: 800px; text-transform: uppercase; letter-spacing: .1em; text-decoration: none; display: block; padding: 35px; border-bottom: 1px solid #129cf3; text-align: center; border-collapse: collapse; transition: all 1s; } .menu a:hover { background-color: #129cf3; color: #000; text-decoration: none; } .menu i { font-weight: 600; } .menu-list li a { margin: 0px; padding: 15px; border: 0px; font-size: 12px; text-align: center; } /* WIZARD CONTAINER */ .container { width: 80%; } /*NEXT BUTTON */ .action-button { width: 80px; letter-spacing: .1em; position: relative; left: 190px; top: 20px; background: #fff; font-weight: 500; color: #000; border: 1px solid #129cfe; border-radius: 1px; cursor: pointer; padding: 10px 10px; margin: 10px; } .action-button:hover { background-color: #129cf3; border: 1px solid #129cfe; color: #000; } /* WIZARD*/ .wizard { margin: 5px auto; background: #fff; } .wizard .nav-tabs { position: relative; margin: 5px auto; margin-bottom: 0; border-bottom-color: #e0e0e0; } .wizard>div.wizard-inner { position: relative; } .connecting-line { height: 2px; background: #e0e0e0; position: absolute; width: 75%; margin: 0 auto; left: 0; right: 0; top: 63%; z-index: 1; } .wizard .nav-tabs>li.active>a, .wizard .nav-tabs>li.active>a:hover, .wizard .nav-tabs>li.active>a:focus { color: #129cf3; cursor: default; border: 0; border-bottom-color: transparent; } span.round-tab { width: 50px; height: 50px; line-height: 45px; display: inline-block; border-radius: 100px; background: #fff; border: 2px solid #e0e0e0; z-index: 2; position: absolute; left: 0; text-align: center; font-size: 25px; top: 35%; } span.round-tab i { color: #129cf3; } .wizard li.active span.round-tab { background: #fff; border: 2px solid #129cf3; } .wizard li.active span.round-tab i { color: #129cf3; } span.round-tab:hover { color: #333; border: 2px solid #333; } .wizard .nav-tabs>li { width: 25%; } .wizard li:after { content: " "; position: absolute; left: 46%; opacity: 0; margin: 0 auto; bottom: 0px; border: 5px solid transparent; border-bottom-color: #129cfe; transition: 0.1s ease-in-out; } .wizard li.active:after { content: " "; position: absolute; left: 47.55%; opacity: 1; margin: 0 auto; bottom: 0px; border: 10px solid transparent; border-bottom-color: #129cf3; } .wizard .nav-tabs>li a { width: 50px; height: 50px; margin: 35px auto; border-radius: 0%; padding: 0; } .wizard .nav-tabs>li a:hover { background: transparent; } .wizard .tab-pane { position: relative; padding-top: 50px; } .wizard h3 { margin-top: 0; } .step1 .row { margin-bottom: 10px; } .step_21 { border: 1px solid #eee; border-radius: 5px; padding: 10px; } .step33 { border: 1px solid #ccc; border-radius: 2px; padding-left: 5px; margin-bottom: 5px; } .dropselectsec { width: 68%; padding: 6px 5px; border: 1px solid #ccc; border-radius: 3px; color: #333; margin-left: 10px; outline: none; font-weight: normal; } .dropselectsec1 { width: 74%; padding: 6px 5px; border: 1px solid #ccc; border-radius: 3px; color: #333; margin-left: 10px; outline: none; font-weight: normal; } .mar_ned { margin-bottom: 10px; } .wdth { width: 25%; } .birthdrop { padding: 6px 5px; border: 1px solid #ccc; border-radius: 3px; color: #333; margin-left: 10px; width: 16%; outline: 0; font-weight: normal; } @media( max-width: 585px) { .wizard { width: 90%; height: auto !important; } span.round-tab { font-size: 16px; width: 50px; height: 50px; line-height: 50px; } span.round-tab i { color: #555555; position: relative; top: 50%; transform: translateY(-50%); } .wizard .nav-tabs>li a { width: 50px; height: 50px; line-height: 50px; } .wizard li.active:after { content: " "; position: absolute; left: 35%; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-md-3"> <ul class="menu"> <li><a href="trucks.html" target="preview-iframe">Book Trucks</a></li> <li class="active"> <a href="schedule.html" target="preview-iframe" data-toggle="collapse" data-target="#toggle1" class="collapsed">Schedule <i class="fa fa-angle-down" aria-hidden="true"></i> </a> <div class="collapse" id="toggle1"> <ul class="menu-list"> <li><a href="start.html" target="preview-iframe"> Start Date</a></li> <li><a href="end.html" target="preview-iframe"> End Date</a></li> </ul> </li> <li class="active"> <a href="routes.html" target="preview-iframe" data-toggle="collapse" data-target="#toggle" class="collapsed">Routes <i class="fa fa-angle-down" aria-hidden="true"></i> </a> <div class="collapse" id="toggle"> <ul class="menu-list"> <li><a href="routes2.html" target="preview-iframe">Route 2</a></li> <li><a href="routes3.html" target="preview-iframe">Route 3</a></li> <li><a href="routes4.html" target="preview-iframe">Route 4</a></li> <li><a href="routes5.html" target="preview-iframe">Route 5</a></li> </ul> </div> </li> <li><a href="region.html" target="preview-iframe">Availability Regions</a></li> </ul> </div> </div> <div class="container"> <div class="row"> <section> <div class="wizard"> <div class="wizard-inner"> <div class="connecting-line"></div> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active" id="step1"> <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1"> <span class="round-tab"> <i class="fa fa-truck"></i> </span> </a> </li> <li role="presentation" class="disabled" id="step2"> <a href="#step4" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2"> <span class="round-tab"> <i class="fa fa-calendar"></i> </span> </a> </li> <li role="presentation" class="disabled" id="step3"> <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3"> <span class="round-tab"> <i class="fa fa-map-marker"></i> </span> </a> </li> <li role="presentation" class="disabled" id="complete"> <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Step 4"> <span class="round-tab"> <i class="fa fa-table"></i> </span> </a> </li> </ul> </div> </div> </section> </div> </div> <div class="clearfix"></div> <div class="row"> <div class="col-md-3"> <input type="button" name="next" class="next action-button" value="Next" onclick="next" /> </div> 

Answer 1

$(".next").click(function(e) {
  var $active = $('.wizard .nav-tabs li.active');
  $active.removeClass('active');

  var $next = $active.next();
  $next.removeClass('disabled');
  $next.children('a').click();
  // or
  // $next.first().click();
});

编辑：添加了iframe的src操作。

$(".next").click(function(e) {
  var $active = $('.wizard .nav-tabs li.active');
  $active.removeClass('active');

  var $next = $active.next();
  $next.removeClass('disabled');

  var $link = $next.children('a');
  $link.click();

  var $iframe = $('#iframe');
  $iframe.attr('src', $link.attr('href'));
});

编辑：增加了用户行为

$(".next").click(function(e) {
  var $active = $('.wizard .nav-tabs li.active');
  var $link;

  if ($active.length === 0) {
    $active = $('.wizard .nav-tabs li').first();
    $active.addClass('active');

    $link = $active.children('a');
  } else {
    $active.removeClass('active');
    var $next = $active.next();
    $next.removeClass('disabled');

    $link = $next.children('a');
  }

  $link.click();

  var $iframe = $('#iframe');
  $iframe.attr('src', $link.attr('href'));
});