简单的多步骤

Question

JSfiddle DEMO

HTML

<div id="status-buttons" class="text-center">
  <a href="/1"><span>1</span></a>
  <a href="/2"><span>2</span></a>
  <a href="/3"><span>3</span></a>
</div>

CSS

#status-buttons a {
    display:inline-block;
  font-size: 22px;
  margin-right: 20px; }
  #status-buttons a span {
    color: white;
    line-height: 60px;
    padding-top: 5px; 
}

#status-buttons a.active span {
  background: #00BC8C; }

.circle, #status-buttons a {
  width: 56px;
  height: 56px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  background: #5dc5c5;
  margin-right: 10px; 
  text-align:center;

}

尝试了圈子。如图所示，我被圆圈之间的线条卡住了。尝试添加边框底部，它没有出现。不认为 div 中的宽度对线条有用吗？有什么办法可以解决这个问题，所以当点击圆圈上的不同链接时，圆圈的数量和它的线条会有活动的类？

另一个问题：假设链接将我们带到不同形式的不同页面，是否可以使圈子活跃？只有我能想到的方法是让每个页面中的圆圈都处于活动状态，所以如果单击任何链接页面，例如单击 #2，它将显示 1 和 2 个圆圈处于活动状态。这可能是一个骗局。还有其他更好的方法吗？

帮助表示赞赏。

Answer 1

我最近做了类似的事情。

.progressbar {
        margin-top: 40px;
        margin-bottom: 30px;
        overflow: hidden;
        counter-reset: step; 
    }
    .progressbar li {
        list-style-type: none;
        color: #555555;
        text-transform: uppercase;
        text-align: center;
        font-size: 9px;
        width: 20%;
        float: left;
        position: relative; 
    }
    .progressbar li:before {
        content: counter(step);
        counter-increment: step;
        width: 20px;
        line-height: 20px;
        display: block;
        font-size: 10px;
        color: #333;
        background: #bfbfbf;
        border-radius: 20px;
        margin: 0 auto 5px auto; 
    }
    .progressbar li:after {
        content: '';
        width: 100%;
        height: 2px;
        background: #bfbfbf;
        position: absolute;
        left: -50%;
        top: 9px;
        margin-left: 5px;
        z-index: -1; 
    }
    .progressbar li:first-child:after {
        content: none; 
    }
    .progressbar li.stepped {
        color: #900028;
        font-weight: bold; 
    }
    .progressbar li.stepped:before, 
    .progressbar li.stepped:after{
        background: #900028;
        color: white; 
    }

    

<ul class="progressbar">
      <li class="stepped">Step 1</li>
      <li class="stepped">Step 2</li>
      <li class="stepped">Step 3</li>
      <li>Step 4</li>
      <li>Step 5</li>
    </ul>

（信用：http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar）