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

我认为一个好的解决方案是使用<a name="...">为<a href="...">提供真正的目标。因此链接和相应div之间的对应关系在HTML中是显式的。然后编写一个单独的javascript函数，查找与单击的url对应的元素。

Answer 2

用你的jQuery替换：

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

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

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

li使用jquery点击了函数

3 个答案: