我已经创建了一个垂直的时间线。现在我要设置圆圈的底色，当它是一个活跃的阶段。你可以检查下面的图像第一个圆圈的文字是一个活跃的舞台和背景颜色是红色。

示例：

我有四个表单，称为form1,form2,form3,form4。当页面重新加载时，第一个圆圈总是在红色背景中。如果用户在form1上，则带文本的圆的背景颜色为红色。点击button1后，第二个圆圈为红色背景，第一个圆圈为绿色背景。如果用户点击了form2，那么第二个圆圈将是绿色的，第三个圆圈将是红色的。如果用户点击了第三个按钮3，那么第三个圆圈的背景是绿色的，四个圆圈的背景是红色的。

我试了一些代码，只有第一个圆圈是工作的，如果我点击按钮1从form1比所有的圆圈显示红色。

我的剧本有些问题。请查一下。并且在click事件中检查按钮名称,因为我为每个按钮设置了相同的名称。

我在这里更新了我的代码。现在的问题是，如果该字段为空，即使我得到验证错误消息，也会显示绿圈。https://jsfidle.net/narendra2015/g2j1rtzn/

你能帮我一下吗？

null

$(document).ready(function(){
  $('.button-clicked').click(function(){

    $('.info-timeline ul li span').removeClass("timeline-circle-active");
    $('.info-timeline ul li a').removeClass("timeline-text-active");

    $('.info-timeline ul li span').addClass("timeline-circle-active");
    $('.info-timeline ul li a').addClass("timeline-text-active");
});
});

$(document).ready(function() {
    $("form[name='form1']").validate({
        rules: {
            fname: {
                required: true,
                 minlength:3,
                maxlength:50
            }
        },
         submitHandler: function() {
         //form.submit();
          $.ajax({
            type: 'post',
            url: 'process.php',
            data: $("form[name='form1']").serialize(),
           success: function (data) {
           //alert(data);
           $('#first').hide();
           $('#second').show();
            }
          });
        }
    })
});

$(document).ready(function() {
    $("form[name='form2']").validate({
        rules: {
            mname: {
                required: true,
                 minlength:3,
                maxlength:50
            }
        },
         submitHandler: function() {
         //form.submit();
          $.ajax({
            type: 'post',
            url: 'process.php',
            data: $("form[name='form2']").serialize(),
           success: function (data) {
           //alert(data);
           $('#second').hide();
           $('#third').show();
            }
          });
        }
    })
});

$(document).ready(function() {
    $("form[name='form3']").validate({
        rules: {
            age: {
                required: true,
                 minlength:3,
                maxlength:50
            }
        },
         submitHandler: function() {
         //form.submit();
          $.ajax({
            type: 'post',
            url: 'process.php',
            data: $("form[name='form4']").serialize(),
           success: function (data) {
           //alert(data);
           $('#third').hide();
           $('#four').show();
            }
          });
        }
    })
});

.info-timeline ul{list-style: none;margin: 0;padding: 0;}
.info-timeline ul li{margin:0 10px;}
.info-timeline ul li span{
  position: relative;
  border: 2px solid #000;
  border-radius: 100%; 
  width: 45px;
  line-height: 40px;
  text-align: center;
  margin-top: 30px;
  color: #000;
  z-index: 2;
  display: inline-block;
}

.info-timeline ul li span.timeline-circle-active{
  background-color: #ff0000;
  color: #000;
  border: 1px solid #ffff00 !important;
}
.info-timeline ul li a.timeline-text-active{
	color: #ff0000 !important;
}

.info-timeline ul li:not(:first-of-type) span:before {
  position: absolute; 
  border: 1px solid #000;
  width: 0; 
  height: 30px; 
  display: block;
  content: ''; 
  left: 50%; 
  z-index: 1; 
  top: -32px; 
  margin-left: -1px;
  }

.info-timeline ul li:first-child {margin-top: 0;}
.info-timeline ul li:first-child:before {display: none;}
.info-timeline ul li a{color: #000;margin: 10px;}

#second, #third, #four{
	display: none;

}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

<div class="info-timeline">
		<ul>
			<li><span class="timeline-circle-active">1</span><a href="#" class="timeline-text-active">Button1</a></li>
			<li><span>2</span><a href="#">Button2</a></li>
			<li><span>3</span><a href="#">Button3</a></li>
			<li><span>4</span><a href="#">Button4</a></li>
		</ul>
	</div><!--info-timeline-->

<div id="first">
	<form method="post" action="" name="form1">
		<input type="text" name="fname" placeholder="first name">
		<button type="submit" class="button-clicked">Button1</button>
	</form>
</div>

<div id="second">
	<form method="post" action="" name="form2">
		<input type="text" name="mname" placeholder="middle name">
		<button type="submit" class="button-clicked">Button2</button>
	</form>
</div>

<div id="third">
	<form method="post" action="" name="form3">
		<input type="text" name="lname" placeholder="last name">
		<button type="submit" class="button-clicked">Button3</button>
	</form>
</div>

<div id="four">
	<form method="post" action="" name="form4">
		<input type="text" name="age" placeholder="age">
		<button type="submit" class="button-clicked">Submit</button>
	</form>
</div>

null