非効率的なコードを美化する

Question

こんにちは、ありがとうございました。

私は非常にコーディングに新しいです、私はこのコードを考えるのにかなりの時間を費やしました。幸いにもそれは動作します:-)その機能は、多段階セクションのnav要素をアクティブに設定することです。これは非常に非効率的ですが、私はそれをより効率的にするためのスキルはまだありません。私を助けてくれますか？大変ありがとう、ありがとう！

$('#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'); 

    }); 

Answer 1

あなたはすべて同じクラスを与えることができます。たとえば、class="step"です。

は、その後、あなたがそれらのすべてのために

$(".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") 
}); 

Answer 2

代わりにidの

クラス、および4行のコードを動作しますクリック機能を追加することができます（IDは忘れてください）。

$('.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>