一步一步的向导

Question

尝试逐步制作向导类型小部件。但还没有成功。顶部圆圈部分正在工作，下一个上一个工作也是。但是，如果我单击下一个上一个或更改步骤，则内容不会更改。

你能看到遗漏的东西吗？

演示 https://jsfiddle.net/cyber007/oayt3eoy/

$(document).ready(function() {
  function setClasses(index, steps) {
    if (index < 0 || index > steps) return;
    if (index == 0) {
      $("#prev").prop('disabled', true);
    } else {
      $("#prev").prop('disabled', false);
    }
    if (index == steps) {
      $("#next").text('done');
    } else {
      $("#next").text('next');
    }
    $("ul li").each(function() {
      $(this).removeClass();
    });
    $("ul li:lt(" + index + ")").each(function() {
      $(this).addClass("done");
    });
    $("ul li:eq(" + index + ")").addClass("active")
    var p = index * (100 / steps);
    $("#prog").width(p + '%');
  }
  $(".step-wizard ul a").click(function() {
    var step = $(this).find("span.step")[0].innerText;
    var steps = $(".step-wizard ul li").length;
    setClasses(step - 1, steps - 1)
  });
  $("#prev").click(function() {
    var step = $(".step-wizard ul li.active span.step")[0].innerText;
    var steps = $(".step-wizard ul li").length;
    setClasses(step - 2, steps - 1);
  });
  $("#next").click(function() {
    if ($(this).text() == 'done') {
      alert("submit the form?!?")
    } else {
      var step = $(".step-wizard ul li.active span.step")[0].innerText;
      var steps = $(".step-wizard ul li").length;
      setClasses(step, steps - 1);
    }
  });

  // initial state setup
  setClasses(0, $(".step-wizard ul li").length);
});

#container {
  position: relative;
  width: 100%;
  text-align: center;
  height: 225px;
}
.buttons {
  position: absolute;
  top: 180px;
  text-align: center;
  width: 100%;
}
.btn {
  width: 50px;
  height: 30px;
}
.step-wizard {
  display: inline-block;
  position: relative;
  width: 85%;
}
.step-wizard .progress {
  position: absolute;
  top: 43px;
  left: 12.5%;
  width: 75%;
}
.step-wizard .progressbar {
  position: absolute;
  background-color: #0aa89e;
  opacity: 0.4;
  height: 12px;
  border: 1px solid e5e6e6;
  width: 0%;
  -webkit-transition: width 0.6s ease;
  -o-transition: width 0.6s ease;
  transition: width 0.6s ease;
}
.step-wizard .progressbar.empty {
  opacity: 1;
  width: 100%;
  background-color: #e5e6e6;
}
.step-wizard ul {
  position: absolute;
  width: 100%;
  list-style-type: none;
  padding: 0;
  left: -2%;
}
.step-wizard li {
  display: inline-block;
  text-align: center;
  width: 24.7%;
}
.step-wizard li .step {
  position: absolute;
  display: inline-block;
  line-height: 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 4px solid;
  border-color: #e5e6e6;
  background: #ffffff;
  -webkit-transition: background-color 0.6s ease, border-color 0.6s ease;
  -o-transition: background-color 0.6s ease, border-color 0.6s ease;
  transition: background-color 0.6s ease, border-color 0.6s ease;
}
.step-wizard li .title {
  position: absolute;
  width: 100%;
  left: 20px;
  padding-top: 42px;
  color: #969c9c;
  -webkit-transition: color 0.6s ease;
  -o-transition: color 0.6s ease;
  transition: color 0.6s ease;
}
.step-wizard li.active .step {
  border-color: #0aa89e;
}
.step-wizard li.active .title {
  color: black;
}
.step-wizard li.done .step {
  color: white;
  background-color: #0aa89e;
  border-color: #0aa89e;
}
.step-wizard li > a {
  display: block;
  width: 100%;
  color: black;
  position: relative;
  text-align: center;
}
.step-wizard li > a:hover .step {
  border-color: #0aa89e;
}
.step-wizard li > a:hover .title {
  color: black;
}
@media only screen and (max-width: 1200px) {
  .step-wizard li {
    width: 24%;
  }
}
@media only screen and (max-width: 375px) {
  .step-wizard li {
    width: 22%;
  }
}
.contentarea {
  flort: left;
  width: 100%;
  padding: 20px;
  border: solid 1px red;
  display: none
}
.contentarea.active {
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
  <div class="step-wizard">
    <div class="progress">
      <div class="progressbar empty"></div>
      <div id="prog" class="progressbar"></div>
    </div>
    <ul>
      <li class="active">
        <a href="#" id="step1">
          <span class="step">1</span>
          <span class="title">Client Details</span>
        </a>
      </li>
      <li class="">
        <a href="#" id="step2">
          <span class="step">2</span>
          <span class="title">Brand Details</span>
        </a>
      </li>
      <li class="">
        <a href="#" id="step3">
          <span class="step">3</span>
          <span class="title">Shift Details</span>
        </a>
      </li>
      <li class="">
        <a href="#" id="step4">
          <span class="step">4</span>
          <span class="title">Confirmation</span>
        </a>
      </li>
    </ul>
  </div>
  <div class="buttons">
    <button class="btn" id="prev">prev</button>
    <button class="btn" id="next">next</button>
  </div>
</div>

<div class="full-content">
  <div class="contentarea active" id="step1">step 1</div>
  <div class="contentarea" id="step2">step 2</div>
  <div class="contentarea" id="step3">step 3</div>
  <div class="contentarea" id="step4">step 4</div>
</div>

Answer 1

现在没有代码显示活动内容区域

添加

$("#prog").width(p + '%');
$(".full-content > div").removeClass("active").eq(index).addClass("active");

参见示例

$(document).ready(function() {
  function setClasses(index, steps) {
    if (index < 0 || index > steps) return;
    if (index == 0) {
      $("#prev").prop('disabled', true);
    } else {
      $("#prev").prop('disabled', false);
    }
    if (index == steps) {
      $("#next").text('done');
    } else {
      $("#next").text('next');
    }
    $("ul li").each(function() {
      $(this).removeClass();
    });
    $("ul li:lt(" + index + ")").each(function() {
      $(this).addClass("done");
    });
    $("ul li:eq(" + index + ")").addClass("active")
    var p = index * (100 / steps);
    $("#prog").width(p + '%');
    $(".full-content > div").removeClass("active").eq(index).addClass("active");
  }
  $(".step-wizard ul a").click(function() {
    var step = $(this).find("span.step")[0].innerText;
    var steps = $(".step-wizard ul li").length;
    setClasses(step - 1, steps - 1)
  });
  $("#prev").click(function() {
    var step = $(".step-wizard ul li.active span.step")[0].innerText;
    var steps = $(".step-wizard ul li").length;
    setClasses(step - 2, steps - 1);
  });
  $("#next").click(function() {
    if ($(this).text() == 'done') {
      alert("submit the form?!?")
    } else {
      var step = $(".step-wizard ul li.active span.step")[0].innerText;
      var steps = $(".step-wizard ul li").length;
      setClasses(step, steps - 1);
    }
  });

  // initial state setup
  setClasses(0, $(".step-wizard ul li").length);
});

#container {
  position: relative;
  width: 100%;
  text-align: center;
  height: 225px;
}
.buttons {
  position: absolute;
  top: 180px;
  text-align: center;
  width: 100%;
}
.btn {
  width: 50px;
  height: 30px;
}
.step-wizard {
  display: inline-block;
  position: relative;
  width: 85%;
}
.step-wizard .progress {
  position: absolute;
  top: 43px;
  left: 12.5%;
  width: 75%;
}
.step-wizard .progressbar {
  position: absolute;
  background-color: #0aa89e;
  opacity: 0.4;
  height: 12px;
  border: 1px solid e5e6e6;
  width: 0%;
  -webkit-transition: width 0.6s ease;
  -o-transition: width 0.6s ease;
  transition: width 0.6s ease;
}
.step-wizard .progressbar.empty {
  opacity: 1;
  width: 100%;
  background-color: #e5e6e6;
}
.step-wizard ul {
  position: absolute;
  width: 100%;
  list-style-type: none;
  padding: 0;
  left: -2%;
}
.step-wizard li {
  display: inline-block;
  text-align: center;
  width: 24.7%;
}
.step-wizard li .step {
  position: absolute;
  display: inline-block;
  line-height: 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 4px solid;
  border-color: #e5e6e6;
  background: #ffffff;
  -webkit-transition: background-color 0.6s ease, border-color 0.6s ease;
  -o-transition: background-color 0.6s ease, border-color 0.6s ease;
  transition: background-color 0.6s ease, border-color 0.6s ease;
}
.step-wizard li .title {
  position: absolute;
  width: 100%;
  left: 20px;
  padding-top: 42px;
  color: #969c9c;
  -webkit-transition: color 0.6s ease;
  -o-transition: color 0.6s ease;
  transition: color 0.6s ease;
}
.step-wizard li.active .step {
  border-color: #0aa89e;
}
.step-wizard li.active .title {
  color: black;
}
.step-wizard li.done .step {
  color: white;
  background-color: #0aa89e;
  border-color: #0aa89e;
}
.step-wizard li > a {
  display: block;
  width: 100%;
  color: black;
  position: relative;
  text-align: center;
}
.step-wizard li > a:hover .step {
  border-color: #0aa89e;
}
.step-wizard li > a:hover .title {
  color: black;
}
@media only screen and (max-width: 1200px) {
  .step-wizard li {
    width: 24%;
  }
}
@media only screen and (max-width: 375px) {
  .step-wizard li {
    width: 22%;
  }
}
.contentarea {
  flort: left;
  width: 100%;
  padding: 20px;
  border: solid 1px red;
  display: none
}
.contentarea.active {
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
  <div class="step-wizard">
    <div class="progress">
      <div class="progressbar empty"></div>
      <div id="prog" class="progressbar"></div>
    </div>
    <ul>
      <li class="active">
        <a href="#">
          <span class="step">1</span>
          <span class="title">Client Details</span>
        </a>
      </li>
      <li class="">
        <a href="#">
          <span class="step">2</span>
          <span class="title">Brand Details</span>
        </a>
      </li>
      <li class="">
        <a href="#">
          <span class="step">3</span>
          <span class="title">Shift Details</span>
        </a>
      </li>
      <li class="">
        <a href="#">
          <span class="step">4</span>
          <span class="title">Confirmation</span>
        </a>
      </li>
    </ul>
  </div>
  <div class="buttons">
    <button class="btn" id="prev">prev</button>
    <button class="btn" id="next">next</button>
  </div>
</div>

<div class="full-content">
  <div class="contentarea active" id="step1">step 1</div>
  <div class="contentarea" id="step2">step 2</div>
  <div class="contentarea" id="step3">step 3</div>
  <div class="contentarea" id="step4">step 4</div>
</div>