【发布时间】：2021-10-31 10:58:36
【问题描述】：
我创建了一个垂直时间线。现在我必须在活动阶段设置圆圈的背景颜色。您可以检查下图第一个带有文本的圆圈是活动阶段，背景颜色是红色。
例子：
我有四个称为form1,form2,form3,form4 的表单。当页面重新加载时，第一个圆圈总是在红色背景中。如果用户在form1 上，则带有文本的圆圈的背景颜色为红色。单击按钮 1 后，第二个圆圈为红色背景，第一个圆圈为绿色。如果用户点击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>【问题讨论】：
-
这里：
$('.info-timeline ul li span').addClass("timeline-circle-active");you 添加timeline-circle-active类到 .info-timeline 中 li 中的每个跨度。所以，每个圆圈都会变成红色。 -
是的，而不是当它处于活动状态时如何改变圆的颜色
-
您可以在选定的圈子中使用名为“selected”的类。使用
next()选择下一个或索引您的项目以调用它们。
标签： javascript jquery html css