如何在活动阶段更改时间轴圈的颜色？
我创建了一个垂直时间轴。 现在我必须在活动阶段设置圆圈的背景颜色。 您可以检查下面的图像第一个圆圈，文本是活动阶段，背景颜色是红色。
例：
我有四个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; }
一个工作的例子：
（因为提交，我担心你必须自己尝试。但它对我有用）
注意 ：
- 我为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; }
我简化了你的代码（删除了不是问题的代码）。
HTML
我添加了按钮和跨度之间的关系。 data-target ID为span。
JQ
在评论后编辑
首先，你得到目标跨度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 }