如何使用下一个按钮

Question

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

例如：步骤1是名为truck的菜单，卡车页面打开              第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'));
});