Question

我在此代码中的目标是在单击链接时显示特定的div标记并隐藏所有其他div标记。我一直以不同的方式重写它，但似乎无法让它正常工作。

下面的JavaScript ......

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

HTML下面......

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

Answer 1

您的代码无法正常运行，因为您在函数中传递了contact而不是content。

考虑使用display:none代替visibility，因为如果您使用visibility，您的内容将被隐藏，但会留下空间：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果这是你的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>

玩得开心！ =）

Answer 3

将所有div元素赋予一个类。点击：

使用
隐藏所有这些内容
getElementsByClassName方法

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

通过其ID

使用jQuery进行这些DOM操作非常简单。

将多个ID传递给JS函数

3 个答案: