javascript - Hide active element and replace it by new on click (javascript)

Question

I have a table with many link-buttons in table head. This buttons work like switchers for the content of the table. Only one table is displayed at the moment and others are hidden. So if I click button I want to hide current table and show new one. I use this easy 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>

and onclick event

onclick="showStuff('table2'); hideStuff('table1');

However I have many buttons there and I dont know, for exapmple I click on table9 button but which table do I need to hide? (Tables 1,2,3...10 coud be active)

So my question is how can I modify my code to hide active element(table) and display new(desired one)

Thank you.

Answer 1

最简单的方法。

标记

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

Answer 2

给你所有的元素一个相同的类，例如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';
}