美化低效代码
美化低效代码
提问于 2017-04-13 10:29:39
您好，非常感谢您的帮助，提前！
我对编码非常陌生，我花了相当多的时间来编写这段代码。幸运的是，它的功能是将多步部分的nav元素设置为active.我知道这是非常低效率的编码，但是我还没有足够的技能来提高它的效率。我可以请您帮个忙吗？非常感谢，谢谢！
$('#Step1').click(function(){
$('#Step1').addClass('Step-item-active');
$('#Step2').removeClass('Step-item-active');
$('#Step3').removeClass('Step-item-active');
$('#Step4').removeClass('Step-item-active');
});
$('#Step2').click(function(){
$('#Step2').addClass('Step-item-active');
$('#Step3').removeClass('Step-item-active');
$('#Step4').removeClass('Step-item-active');
$('#Step1').removeClass('Step-item-active');
});
$('#Step3').click(function(){
$('#Step3').addClass('Step-item-active');
$('#Step4').removeClass('Step-item-active');
$('#Step1').removeClass('Step-item-active');
$('#Step2').removeClass('Step-item-active');
});
$('#Step4').click(function(){
$('#Step4').addClass('Step-item-active');
$('#Step1').removeClass('Step-item-active');
$('#Step2').removeClass('Step-item-active');
$('#Step3').removeClass('Step-item-active');
});回答 2
Stack Overflow用户
回答已采纳
发布于 2017-04-13 10:35:30
你可以给他们上同样的课。例如，class="step"。(忘记ID)
然后，您可以添加一个对所有这些功能都有效的单击函数。
$(".step").click(function(){
// remove the class from all of them
$(".step").removeClass("Step-item-active")
// add the class to the clicked element
$(this).addClass("Step-item-active")
});Stack Overflow用户
发布于 2017-04-13 10:37:36
类，而不是ids，以及四行代码。
$('.Step').click(function() {
$('.Step-item-active').removeClass('Step-item-active');
$(this).addClass('Step-item-active');
});div {
width: 50px;
height: 50px;
background-color: blue;
}
.Step-item-active {
background-color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="Step"></div>
<div class="Step"></div>
<div class="Step"></div>
<div class="Step"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43389842
复制相关文章
相似问题
腾讯云开发者
