Скрыть активный элемент и заменить его новым по клику (javascript)

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