處於活動狀態時如何更改時間軸圓圈的顏色？

Question

我創建了一個垂直時間線。 現在，我必須設置一個處於活動狀態的圓圈的背景色。 您可以檢查下面的圖像，帶有文字的第一個圓圈是活動的舞台，背景顏色是紅色。

例：

我有四個名為form1,form2,form3,form4 。重新加載頁面時，第一個圓圈始終在紅色背景中。 如果用戶使用的是form1則帶有文本的圓圈的背景顏色為紅色。 單擊button1后，第二個圓圈為紅色背景，第一個圓圈為綠色。 如果用戶單擊form2 ，則第二個圓圈為綠色，第三個圓圈為紅色。 如果用戶單擊了第三個按鈕3，則背景的第三個圓圈為綠色，而四個圓圈為紅色。

我嘗試了一些代碼，但只有第一個圓圈有效，如果我從form1單擊Button1 ，則所有圓圈都顯示為紅色。

我的腳本有問題。 請檢查一下。 還要在單擊事件時檢查我的按鈕名稱，因為我為每個按鈕設置了相同的名稱。

我在這里更新我的代碼。現在的問題是，即使我收到驗證錯誤消息，該字段是否為空白，也顯示綠色圓圈。 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; } 

 <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> 

Answer 1

一個工作示例：

（由於提交，恐怕您必須自己嘗試。但這對我有用）

注意 ：

• 我為li添加了一個ID屬性（圓1，圓2等）
• 表單使用GET方法，而不是POST（必須在URL中使用next_index ）

概要：

提交表單時，屬性next_index （圓圈）將與表單一起發送。 通過此屬性，我們知道必須選擇哪個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; } 

 <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> 

Answer 2

我簡化了您的代碼（刪除了不適合該問題的代碼）。

的HTML

我在按鈕和跨度之間添加了一個關系。 具有跨度的data-target ID。

JQ

操作評論后編輯

首先，您獲得目標跨度ID（單擊button2時，將選擇ID為＃button2的跨度）

第二，獲取當前選定的范圍之前的范圍（如果存在）。 例如，單擊button2時，prevSelected的值為#button1

然后將類添加到跨度和鏈接

參見下面的編輯代碼

的CSS

為greenSpan類添加樣式

觀察

1. 無需添加多個$(document).ready(function(){ 。將所有代碼嵌套在一個函數中
2. 可以將活動類分配給包含span和a的li ，然后僅在css中設置樣式，例如， 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 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="info-timeline"> <ul> <li><span id="button1" class=" timeline-circle-active">1</span><a href="#" class="timeline-text-active">Button1</a></li> <li><span id="button2">2</span><a href="#">Button2</a></li> <li><span id="button3">3</span><a href="#">Button3</a></li> <li><span id="button4">4</span><a href="#">Button4</a></li> </ul> </div> <!--info-timeline--> <button type="submit" class="button-clicked" data-target="button1">Button1</button> <button type="submit" class="button-clicked" data-target="button2">Button2</button> <button type="submit" class="button-clicked" data-target="button3">Button3</button> <button type="submit" class="button-clicked" data-target="button4">Button4</button>