将多个id传递给JS函数

    function show(id1, id2, id3, id4)
    {
    document.getElementById(id1).style.visibility="visible";
    document.getElementById(id2).style.visibility="hidden";
    document.getElementById(id3).style.visibility="hidden";
    document.getElementById(id4).style.visibility="hidden";
    }

<a href='#home' onclick="show('home', 'info', 'payment', 'contact')">Home</a>
<a href='#info' onclick="show('info', 'home','payment','contact')">Information</a>
<a href='#payment' onclick="show('payment', 'info', 'home','contact')">Payment</a>
<a href='#contact' onclick="show('contact', 'info', 'payment','home')">Contact</a>

<div id="home">Content</div>
<div id="info">Content</div>
<div id="payment">Content</div>
<div id="content">Content</div>

您的代码不能正常工作，因为您在函数中传递contact而不是content。

考虑使用display:none而不是visibility，因为如果你使用visibility，你的内容将被隐藏，但它将在后面留下一个空间:

function show(id1, id2, id3, id4)
    {
    document.getElementById(id1).style.display="block";
    document.getElementById(id2).style.display="none";
    document.getElementById(id3).style.display="none";
    document.getElementById(id4).style.display="none";
    }

<a href='#home' onclick="show('home', 'info', 'payment', 'contact')">Home</a>
<a href='#info' onclick="show('info', 'home','payment','contact')">Information</a>
<a href='#payment' onclick="show('payment', 'info', 'home','contact')">Payment</a>
<a href='#contact' onclick="show('contact', 'info', 'payment','home')">Contact</a>
<div id="home">Home Content</div>
<div id="info">Info Content</div>
<div id="payment">Pay Content</div>
<div id="contact">Con Content</div>

如果这是你的html:

<div id="home" class="singleVisible" onclick="disableOthers(this)">Content #1</div>
<div id="info" class="singleVisible" onclick="disableOthers(this)">Content #2</div>
<div id="payment" class="singleVisible" onclick="disableOthers(this)">Content #3</div>
<div id="content" class="singleVisible" onclick="disableOthers(this)">Content #4</div>

那么这可以是你的脚本:

function disableOthers(e) {
    var all = document.getElementsByClassName('singleVisible');
    for(var i = 0; i < all.length; i++) {
        // First make all of the elements with the same class hidden.
        if (all[i] !== this) {
            all[i].style.visibility = 'hidden';
        }
        // Then make the clicked element visible.
        e.style.visibility = 'visible';
    }
}

虽然我觉得人们学习JavaScript很重要，但这是jQuery真正能帮助的事情。上面的"onclick"属性出于多种原因不推荐使用，但如果你想要删除这些属性，并用JavaScript中的实际事件处理程序调用来替换它们，那么你也可能想要确保你支持较旧的(IE8，而不是那么旧)浏览器。看看这个:

http://www.anujgakhar.com/2013/05/22/cross-browser-event-handling-in-javascript/

在任何情况下，JQuery版本都很简单，只需删除这些onclick属性并使用以下脚本即可:

<div id="home" class="singleVisible">Content #1</div>
<div id="info" class="singleVisible">Content #2</div>
<div id="payment" class="singleVisible">Content #3</div>
<div id="content" class="singleVisible">Content #4</div>
<script>
    $('.singleVisible').click(function() {
        $('.singleVisible').hide();
        $(this).show();
    });
</script>

另外，请注意，最佳实践(如果可以的话)是有一个父容器，并将事件附加到该容器。否则，在我给出的两个示例中，您将在每种情况下附加四个事件处理程序。它就像在父div中包装链接一样简单，并做如下操作:

<div id="parent">
     <div id="home" class="singleVisible">Content #1</div>
     <div id="info" class="singleVisible">Content #2</div>
     <div id="payment" class="singleVisible">Content #3</div>
     <div id="content" class="singleVisible">Content #4</div>
</div>
<script>
    $('#parent').on('click', '.singleVisible', function() {
         $('.singleVisible').hide();
         $(this).show();
    });
</script>

玩得开心!div =)

使用jQuery进行这些DOM操作非常容易。