各liをeq（1,2、...）forループに変更する

Question

どのようにli：eq（0,1,2,3、... i）をforループに変更できますか？ ?????????????????

$(".section4 ul li:eq(0)").click(function(){ 
 
    $(".PaNel").hide(); 
 
    $("#tab1").show(); 
 
}); 
 

 
$(".section4 ul li:eq(1)").click(function(){ 
 
    $(".PaNel").hide(); 
 
    $("#tab2").show(); 
 
}); 
 

 
$(".section4 ul li:eq(2)").click(function(){ 
 
    $(".PaNel").hide(); 
 
    $("#tab3").show(); 
 
}); 
 

 
$(".section4 ul li:eq(3)").click(function(){ 
 
    $(".PaNel").hide(); 
 
    $("#tab4").show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<section class="section4"> 
 
    <ul> 
 
     <li><a href="#none"></a></li> 
 
     <li><a href="#none"></a></li> 
 
     <li><a href="#none"></a></li> 
 
     <li><a href="#none"></a></li> 
 
    </ul> 
 
    <article class="PaNel" id="tab1"> 
 
    </article> 
 
    <article class="PaNel" id="tab2"> 
 
    </article> 
 
    <article class="PaNel" id="tab3"> 
 
    </article> 
 
    <article class="PaNel" id="tab4"> 
 
    </article> 
 
</section>

Answer 1

、ハンドラ内id値を生成するメソッドを使用して、すべてのループのための必要はありません。 eq()方法を用いて連鎖と

$(".section4 ul li").click(function(){ 
    $(".PaNel").hide(); 
    $("#tab" + ($(this).index() + 1)).show(); 
}); 

---

または1リニアコード。

$(".section4 ul li").click(function(){ 
    $(".PaNel").hide().eq($(this).index()).show(); 
});