如何改变时间轴圆的颜色，当它是一个活跃的阶段？

本文介绍了如何改变时间轴圆的颜色，当它是一个活跃的阶段？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我创建了一个垂直时间轴。现在我必须设置圆形的背景颜色，当它是一个活跃的阶段。您可以查看下面的图片，第一个带有文字的圆圈是一个活动的阶段，背景颜色是红色的。 例子： 我有四种形式，称为），但是）。但是这个符合需求。 $（document）.ready（function （）{//下一个圆圈索引（1-start））let curr_index = getQueryParam（'next_index'）;如果（curr_index =='next_index'）{curr_index = 1} / *这里验证条件if（由于x原因，验证不正确）{curr_index - ; // =>留在当前步骤} * / $（'li＃circle - '+ curr_index）.find（'span'）。addClass（timeline-circle-active）; $（＃李圆 - + curr_index）.find（ A）addClass（ 时间表文本活性）。 }）; //获取querystring函数中的参数getQueryParam（param）{location.search.substr（1）.split（&）.some（function（item）{//返回第一次出现并停止返回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;边界半径：100％;宽度：45px; line-height：40px; text-align：center; margin-top：30px;颜色：＃000; z-index：2;显示：inline-block; } .info-timeline ul li span.timeline-circle-active {background-color：＃ff0000;颜色：＃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;宽度：0; height：30px;显示：块;内容：'';剩下：50％; z-index：1;顶部：-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 =https：// ajax .googleapis.com / ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script>< div class =info-timeline> < UL> < li id =circle-1>< span> 1< / span>< a href =＃> Button1< / a>< / li> < li id =circle-2>< span> 2< / span>< a href =＃> Button2< / a>< / li> < li id =circle-3>< span> 3< / span>< a href =＃> Button3< / a>< / li> < li id =circle-4>< span> 4< / span>< a href =＃> Button4< / a>< / li> < / UL> < / div><！ - info-timeline - >< div id =first> < form method =getaction =name =form1> < input type =textname =fnameplaceholder =first name> < input type =hiddenname =next_indexvalue =2/> < button type =submitclass =button-clicked> Button1< / button> < / form>< / div>< div id =second> < form method =getaction =name =form2> < input type =textname =mnameplaceholder =middle name> < input type =hiddenname =next_indexvalue =3/> < button type =submitclass =button-clicked> Button2< / button> < / form>< / div>< div id =third> < form method =getaction =name =form3> < input type =textname =lnameplaceholder =last name> < input type =hiddenname =next_indexvalue =4/> < button type =submitclass =button-clicked> Button3< / button> < / form>< / div>< div id =fourth> < form method =getaction =name =form4> < input type =textname =ageplaceholder =age> < button type =submitclass =button-clicked> Submit< / button> < / form>< / div> I have created a vertical timeline. Now I have to set the background color of the circle when it is an active stage. You can check the below image first circle with text is an active stage and background color is red.Example:I have four form called as form1,form2,form3,form4.The first circle always in the red background when the page reloads. If the user is on form1 then background color of the circle with text is in the red color. After clicking on button1 the second circle is in red background and first circle in green. If the user clicked on form2 than the second circle is in the green and the third circle will be in red. If the user clicked on the third button3 then the third circle of background is in a green and four circle is in red.I tried some code only first circle is working and if I click on the Button1 from form1 than all the circle showing in red color.There is some issue with my script. Please check it. And also check my button name on click event because I set the same name of each button.I update my code here.Now Issue is if the field is blank than also it showing the green circle even I am getting the validation error message .https://jsfiddle.net/Narendra2015/g2j1rtzn/Would you help me out in this?$(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> 解决方案 A working example:(because of the submission, I'm afraid you have to try it on your own. But it works for me)Note :I added an ID attribute to the li (circle-1, circle-2, etc.)Form use the GET method, not the POST (to have to next_indexin the URL)Synopsis:When you submit the form, a property next_index (circle) is send with the form. Thanks to this property, we know which LI have to be selected.A smarter solution should exist (with sessionStorage for instance), though. But this one fits the need. $(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; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="info-timeline"><ul><li id="circle-1"><span>1</span><a href="#">Button1</a></li><li id="circle-2"><span>2</span><a href="#">Button2</a></li><li id="circle-3"><span>3</span><a href="#">Button3</a></li><li id="circle-4"><span>4</span><a href="#">Button4</a></li></ul></div><!--info-timeline--><div id="first"><form method="get" action="" name="form1"><input type="text" name="fname" placeholder="first name"> <input type="hidden" name="next_index" value="2" /><button type="submit" class="button-clicked">Button1</button></form></div><div id="second"><form method="get" action="" name="form2"><input type="text" name="mname" placeholder="middle name"> <input type="hidden" name="next_index" value="3" /><button type="submit" class="button-clicked">Button2</button></form></div><div id="third"><form method="get" action="" name="form3"><input type="text" name="lname" placeholder="last name"> <input type="hidden" name="next_index" value="4" /><button type="submit" class="button-clicked">Button3</button></form></div><div id="fourth"><form method="get" action="" name="form4"><input type="text" name="age" placeholder="age"><button type="submit" class="button-clicked">Submit</button></form></div> 这篇关于如何改变时间轴圆的颜色，当它是一个活跃的阶段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！