Question

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

我在JavaScript中的代码，用于在show和hide之间切换：

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，反之亦然。“

Answer 1

没有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

Answer 2

您可以这样做：

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

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

Answer 3

尝试使用jquery

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

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

Answer 4

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>

Answer 5

只需更换功能

即可

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

Answer 6

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

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

6 个答案: