隐藏活动元素并用单击时新建替换它（javascript）

我有一张桌子，桌头有许多链接按钮。此按钮的工作方式类似于表格内容的开关。 此时仅显示一个表，其他表则隐藏。所以，若我单击按钮，我想隐藏当前表并显示新表。 我使用这个简单的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‘表1’

然而，我有很多按钮，我不知道，例如，我点击表9按钮，但我需要隐藏哪个表？表1、2、3…10可以激活

所以我的问题是如何修改代码以隐藏活动的elementtable并显示新的所需的elementtable

---

谢谢。

将所有元素设置为同一类，例如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';
}

最简单的方法

加价

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

---

您可以创建一个提琴吗..您可以通过在页面加载上设置window.location.hash=table1来设置默认选项，这种方法还有许多其他优点。1纯css 2您可以通过设置哈希值从任意页面选择任何菜单，即“在选择table2菜单的情况下打开页面”

.frame {
    display: none;

    &:target {
        display: block;
    }
}