Javascript 使用jquery调用函数

我有一个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>

这工作正常，但这不是一个好的编程实践，因为如果表格增加，则需要添加类似的函数。
我的问题是，如何仅通过一个函数更改此单击函数，所有表都将被处理。
请建议

---

工作代码的演示是我认为一个好的解决方案是使用

为

提供一个真正的目标。因此，链接和相应div之间的对应关系在HTML中是显式的。然后编写一个javascript函数，查找与单击的url对应的元素。

将jQuery替换为：

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

---

下面是修改后的示例：。我们所做的是在单击链接并显示相应表时获取href属性的值。无论您添加多少个表，这都不会中断。

这应该适合您

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);
};

函数showRelatedTable（链接，表格）{
$（链接）。单击（功能）（事件，用户界面）{
$（'.tohide'）.hide（）；
$（表）.show（）；
});
}
对于（变量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）；
};

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);
};