li jquery를 사용하여 함수를 클릭했습니다.

Question

두 섹션이있는 html 파일이 있습니다. 탐색 및 본문. 탐색 섹션에는 li 요소 만 있습니다. 본문 섹션에는 html 테이블이 있습니다. 사용자가 탐색을 클릭하면 본문 섹션에 해당 정보가 표시되고 나머지는 숨겨집니다. 이제 기능을 클릭하여 처리 할 수 ​​

<div id="nav"> 
<ul> 
    <li>Summary</li> 
    <li>Table1 
    <ul > 
     <li id="NewTable1"><a href="#NTable1">New</a></li> 
     <li id="ModTable1"><a href="#MTable1">Modified</a></li> 
    </ul> 
    </li> 
    <li>Table2 
    <ul > 
     <li id="NewTable2"><a href="#NTable2">New</a></li> 
     <li id="ModTable2"><a href="#MTable2">Modified</a></li> 
    </ul> 
    </li> 
     <li>Table3 
    <ul > 
     <li id="NewTable3"><a href="#NTable3">New</a></li> 
     <li id="ModTable3"><a href="#MTable3">Modified</a></li> 
    </ul> 
    </li> 

</ul> 
</div> 
<div id="detailss"> 
<table class ="tohide" id="NTable1" border="1" > 
     <caption><b>Table1:New</b></caption> 
     <tr><th>Col</th></tr> 
     <tr><td>Table 1 New Value</td></tr> 
</table> 

<table class ="tohide" id="MTable1" border="1" > 
     <caption><b>Table1:Mod</b></caption> 
     <tr><th>Col</th></tr> 
     <tr><td>Table 1 Mod Value</td></tr> 
</table> 
<table class ="tohide" id="NTable2" border="1" > 
     <caption><b>Table2:New</b></caption> 
     <tr><th>Col</th></tr> 
     <tr><td>Table 2 New Value</td></tr> 
</table> 

<table class ="tohide" id="MTable2" border="1" > 
     <caption><b>Table2:Mod</b></caption> 
     <tr><th>Col</th></tr> 
     <tr><td>Table 2 Mod Value</td></tr> 
</table> 
<table class ="tohide" id="NTable3" border="1" > 
     <caption><b>Table3:New</b></caption> 
     <tr><th>Col</th></tr> 
     <tr><td>Table 3 New Value</td></tr> 
</table> 

<table class ="tohide" id="MTable3" border="1" > 
     <caption><b>Table3:Mod</b></caption> 
     <tr><th>Col</th></tr> 
     <tr><td>Table 3 Mod Value</td></tr> 
</table> 
    <div> 

은, 다음 코드는이 제대로 작동

$("#NewTable1").click(function(event, ui) { 
$('.tohide').hide(); 
    $("#NTable1").show(); 

}); 
$("#ModTable1").click(function(event, ui) { 
$('.tohide').hide(); 
    $("#MTable1").show(); 

}); 
$("#NewTable2").click(function(event, ui) { 
$('.tohide').hide(); 
    $("#NTable2").show(); 

}); 
$("#ModTable2").click(function(event, ui) { 
$('.tohide').hide(); 
    $("#MTable2").show(); 

}); 
$("#NewTable3").click(function(event, ui) { 
$('.tohide').hide(); 
    $("#NTable3").show(); 

}); 
$("#ModTable3").click(function(event, ui) { 
$('.tohide').hide(); 
    $("#MTable3").show(); 

});  

를 작성하지만 테이블이 증가 얻을 경우, 유사한 기능을 추가해야합니다 이것은 좋은 프로그래밍 방법이 아닙니다된다.
제 질문은이 기능을 한 가지 기능만을 통해 모든 방식으로 처리하는 방법입니다. 코드를 작업하는

Answer 1

가와 jQuery를 교체 : http://jsfiddle.net/TADJL/1/ :

여기

$("#nav ul li a").click(function(event, ui) { 
    $('.tohide').hide(); 
    var visible = $(this).attr("href"); 
    $(visible).show(); 
}); 

수정 된 예이다. 우리가하고있는 일은 링크를 클릭하고 해당 테이블을 볼 때마다 href 속성의 값을 얻는 것입니다. 얼마나 많은 표를 추가하든 관계없이이 부분은 중단되지 않습니다.

Answer 2

http://jsfiddle.net/anjsfiddle/TADJL/ 내가 좋은 해결책이 <a href="..."> 겠다는 목표를주고 <a name="...">을 사용하는 것입니다 생각된다
는
데모를 제안하십시오. 따라서 링크와 해당 div 사이의 대응은 HTML에서 명시 적입니다. 그런 다음 클릭 한 URL에 해당하는 요소를 찾는 단일 javascript 함수를 작성하십시오.

Answer 3

이것은

function showRelatedTable (link,table) { 
    $(link).click(function(event, ui) { 
    $('.tohide').hide(); 
     $(table).show(); 
    }); 
} 

for (var i = 1; i < 4; i++) { 
    var newLinkName = "#NewTable"+i; 
    var newTableName = "#NTable"+i; 
    var modLinkName = "#ModTable"+i; 
    var modTableName = "#MTable"+i; 

    showRelatedTable(newLinkName,newTableName); 
    showRelatedTable(modLinkName,modTableName); 
}; 

을 위해 일한다