两个锚点和两个表格，需要显示和隐藏

我有两个锚点和两个表格，点击锚点1时，我想要table1出现，点击anchor2表格1必须关闭，表格2应该出现。两个锚点和两个表格，需要显示和隐藏

我的JavaScript代码的显示和隐藏之间切换：

function setTable(what) { 
    if (document.getElementById(what).style.display == "block") { 
     document.getElementById(what).style.display = "none"; 
    } 
    else if (document.getElementById(what).style.display == "none") { 
     document.getElementById(what).style.display = "block"; 
    } 
}

我的两个锚：

<td> 
    <a href="#" onclick="setTable('aboutdialog');return false" id="iam">I am</a> 
</td> 
<td> 
    <a href="#" onclick="setTable('stab');return false" id="photo">Photo</a> 
</td>

我的两个表：

<table id="aboutdialog" title="Me mE me!!" style="display:none;" > 
<table width="100%" id="stab" style="display:none;width:58%;height: 60%;">

现在我的作品像，第一次单击anchor1时显示表1，第二次单击时隐藏table1。相同的anchor2。

但是我想单击anchor1来关闭表2，如果打开并单独显示table1，反之亦然anchor2。

来源

2014-02-20 Beginner PHP

有相当多的人。我可以建议你回复并且/或者提出你认为有效的答案吗？ – halfer

只需更换功能谁在这里协助

function setTable(what){ 

    if(what=="aboutdialog"){ 
     document.getElementById("aboutdialog").style.display="block"; 
     document.getElementById("stab").style.display="none"; 
    } 
    else if(what=="stab"){ 
     document.getElementById("aboutdialog").style.display="none"; 
     document.getElementById("stab").style.display="block"; 
    } 
}

来源

2014-02-20 07:14:56

非常感谢你..它的工作..其实我被困在这个2天..非常感谢... –

你可以做这样的事情：

$('#iam').click(function() { 
    $(this).closest('#aboutdialog').show().siblings('#stab').hide(); 
}); 

$('#photo').click(function() { 
    $(this).closest('#stab').show().siblings('#aboutdialog').hide(); 
});

来源

2014-02-20 07:08:58 Felix

没有jQuery的

<td> 
     <a href="#" onclick="setTable('aboutdialog', 'stab');return false" id="iam">I am</a> 
    </td> 
    <td> 
     <a href="#" onclick="setTable('stab', 'aboutdialog');return false" id="photo">Photo</a> 
    </td>

然后

function setTable(what, second) { 
    if (document.getElementById(what).style.display == "block") { 
     document.getElementById(what).style.display = "none"; 
    } else if (document.getElementById(what).style.display == "none") { 
     document.getElementById(what).style.display = "block"; 
     document.getElementById(second).style.display = "none"; 
    } 
}

演示：Fiddle

一个jQuery的解决方案可能看起来像

<table> 
    <tr> 
     <td> 
      <!--Add a class trigger to the anchor elements--> 
      <a href="#aboutdialog" id="iam" class="trigger">I am</a> 
     </td> 
     <td> 
      <!--Add a class trigger to the anchor elements--> 
      <a href="#stab" id="photo" class="trigger">Photo</a> 
     </td> 
    </tr> 
</table> 
<!--Add a class target to the tables elements--> 
<table id="aboutdialog" title="Me mE me!!" style="display:none;" class="target"> 
    <tr> 
     <td>1</td> 
    </tr> 
</table> 
<!--Add a class target to the tables elements--> 
<table width="100%" id="stab" style="display:none;width:58%;height: 60%;" class="target"> 
    <tr> 
     <td>2</td> 
    </tr> 
</table>

然后

//dom ready handler 
jQuery(function() { 
    var $targets = $('.target'); 
    $('.trigger').click(function() { 
     var id = $(this).attr('href'); 
     //hide all other target elements 
     $targets.not(id).hide(); 
     //toggle the display of current element 
     $(id).toggle() 
    }) 
})

演示：Fiddle

来源

2014-02-20 07:10:18

尝试使用jquery

$(document).ready(function($) { 
    $('#iam').click(function(){ 
     $('#aboutdialog').show(); 
     $('#stab').hide(); 
    }); 

    $('#photo').click(function(){ 
     $('#stab').show(); 
     $('#aboutdialog').hide(); 
    }); 
});

来源

2014-02-20 07:11:00

live example is here >>

简单与jQuery库：

$('#iam').click(function(){ 
    $('#aboutdialog').show().siblings('table').hide(); 
}); 
$('#photo').click(function(){ 
    $('#newdialog').show().siblings('table').hide(); 
});

HTML

<a href="#" onclick="setTable('aboutdialog');return false" id="iam">I am</a></td> 
<td><a href="#" onclick="setTable('stab');return false" id="photo">Photo</a></td> 

<table id="aboutdialog" title="Me mE me!!" style="display:none;" > 
<tr><th>abc</th></tr> 
</table> 

<table id="newdialog" title="Me mE me!!" style="display:none;" > 
<tr><th>yaskjd</th></tr> 
</table>

来源

2014-02-20 07:14:16

$(document).ready(function() { 
    var options = {'iam': 'aboutdialog', 'photo': 'stab'}; 
    $('#iam, #photo').on('click', function() { 
     $('#aboutdialog, #stab').hide(); 
     $('#' + options.($(this).attr('id'))).show(); 
    }); 
});

来源

2014-02-20 07:24:19

两个锚点和两个表格，需要显示和隐藏

回答

相关问题