javascript - li clicked 函数使用 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();

 });     

这工作正常，但这不是好的编程习惯，因为如果表增加，需要添加类似的功能。
我的问题是如何仅通过一个函数以这种方式更改此点击功能，处理所有表格。
请建议
工作代码的演示是 http://jsfiddle.net/anjsfiddle/TADJL/

Answer 1

将您的 jQuery 替换为:

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

这里是修改后的例子:http://jsfiddle.net/TADJL/1/ .我们正在做的是在您单击链接并显示相应表格时获取 href 属性的值。无论您添加多少表，这都不会中断。