如何在活动阶段更改时间轴圈的颜色？

我创建了一个垂直时间轴。现在我必须在活动阶段设置圆圈的背景颜色。您可以检查下面的图像第一个圆圈，文本是活动阶段，背景颜色是红色。

例：

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

我尝试了一些代码，只有第一个圆圈正在工作，如果我从form1单击Button1而不是所有显示为红色的圆圈。

我的脚本存在一些问题。请检查一下。并且还在点击事件上检查我的按钮名称，因为我为每个按钮设置了相同的名称。

我在这里更新我的代码。现在问题是如果该字段是空白而且它显示绿色圆圈，即使我收到validation错误消息。 https://jsfiddle.net/Narendra2015/g2j1rtzn/

你能帮助我吗？

在此处输入图像描述

 $(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; }

      1Button1
 2Button2
 3Button3
 4Button4

一个工作的例子：

（因为提交，我担心你必须自己尝试。但它对我有用）

注意：

我为li添加了ID属性（circle-1，circle-2等）
表单使用GET方法，而不是POST（必须在URL中使用next_index ）

概要：

提交表单时，将使用表单发送属性next_index （circle）。由于这个属性，我们知道必须选择哪个LI。

但是应该存在更智能的解决方案（例如使用sessionStorage ）。但这个适合需要。

  $(document).ready(function(){ // The next circle index (1-start)) let curr_index = getQueryParam('next_index') ; if (curr_index == 'next_index'){ curr_index = 1 } /* Here the condition on validation if (validation is not ok due to x reasons) { curr_index -- ; // => stay at current step } */ $('li#circle-'+curr_index).find('span').addClass("timeline-circle-active"); $('li#circle-'+curr_index).find('a').addClass("timeline-text-active"); }); //To get a param in the querystring function getQueryParam(param) { location.search.substr(1) .split("&") .some(function(item) { // returns first occurence and stops return item.split("=")[0] == param && (param = item.split("=")[1]) }) return param }

 .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; }

    1Button1
 2Button2
 3Button3
 4Button4

我简化了你的代码（删除了不是问题的代码）。

HTML

我添加了按钮和跨度之间的关系。 data-target ID为span。

在评论后编辑

首先，你得到目标跨度id（当点击button2时，将选择id为＃button2的span）

其次，在当前选定的一个之前得到跨度（如果有的话）。单击button2时的示例，prevSelected将具有值#button1

然后在span和链接中添加和删除类

请参阅下面的编辑代码

CSS

为greenSpan类添加样式

意见

无需添加多个$(document).ready(function(){ 。将所有代码仅包含在1个函数中
您可以将该活动类提供给包含span的li和a ，然后在css中使用样式，而不是将活动类提供给a，例如li.active > span {/*timeline-circle-active css*/}和li.active > a {/*timeline-text-active css*/}

请参阅下面的代码段。如果它对你有所帮助，请告诉我。我希望我解释得很好。

 $(document).ready(function() { $('.button-clicked').click(function() { var TargetSpan = "#" + $(this).attr("data-target"), prevSelected = $(TargetSpan).parents("li").prev("li").find("span") prevSelected.addClass("greenSpan").removeClass("timeline-circle-active") prevSelected.next("a").addClass("greenLink").removeClass("timeline-text-active") $(TargetSpan).addClass("timeline-circle-active").removeClass("greenSpan") $(TargetSpan).next("a").addClass("timeline-text-active") }); });

 .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 a.greenLink { color: green } .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; } .info-timeline ul li span.greenSpan { background: green }

    1Button1
 2Button2
 3Button3
 4Button4

如何在活动阶段更改时间轴圈的颜色？

使用Highcharts调整高度

由于固定导航，增加顶部和底部边距FancyBox v2

Jquery DatePicker颜色周日红

jquery在页面加载时滑动

使用jQuery计算Children的总宽度

检测浏览器中的flex-wrap支持

iframe与pdf黑色闪烁（闪烁）

显示modal dialog时如何隐藏身体滚动条？

将子宽度设置为纯CSS中父级的高度

如果要使用AJAX，请在按钮单击时调整div的大小？