Question

我在桌头有一个包含许多链接按钮的表。这个按钮就像表格内容的切换器一样。此刻只显示一个表，其他表被隐藏。因此，如果我单击按钮，我想隐藏当前表并显示新表。我用这个简单的javascript

<script>
function hideStuff(element_id) { document.getElementById(element_id).style.display = 'none';}
function showStuff(element_id) { document.getElementById(element_id).style.display = 'block'; }
</script>

和onclick事件

onclick =“showStuff（'table2'）; hideStuff（'table1'）;

但是我有很多按钮，我不知道，例如，我点击table9按钮，但我需要隐藏哪个表？（表1,2,3 ... 10表示活跃）

所以我的问题是如何修改我的代码以隐藏活动元素（表格）并显示新的（所需的）

谢谢。

Answer 1

为所有元素提供相同的类，例如linkButtons，那么您只需要一个函数：

function showStuff(element_id) {
    var elements = document.getElementsByClassName('linkButtons');
    for (var i = 0, length = elements.length; i < length; i++) {
        elements[i].style.display = 'none';
    }
    document.getElementById(element_id).style.display = 'block';
}

Answer 2

最简单的方法。

标记

<div class="nav-bar">
        <a href="#table1">Table 1</a>
        <a href="#table2">Table 2</a>
        <a href="#table3">Table 3</a>
    </div>

    <div id="table1" class="frame">Table 1 content</div>
    <div id="table2" class="frame">Table 2 content</div>
    <div id="table3" class="frame">Table 3 content</div>

CSS

.frame {
    display: none;

    &:target {
        display: block;
    }
}

隐藏活动元素并将其替换为new on click（javascript）

2 个答案: