javascript - 单击按钮以显示或隐藏表格

Question

请看这个问题附带的图片。我有四张 table 。当我单击某个表名(例如表 1)时，我希望该表显示在右侧。当我点击其他表名时，前一个应该消失，当前一个应该显示。
我只知道html。所以，请告诉我这是否可以单独用 html 完成。如果没有，我只能使用 CSS 和 JavaScript(我对这两个都是新手，会根据您的回答了解它们是否有帮助)。如果仅使用这 3 种语言(即 HTML、CSS 和 JavaScript)就可以实现这一点，请告知。

Answer 1

这是最简单的入门方法。它为您提供了一种简单的方法来了解正在发生的事情以及事情是如何运作的。

此外，使用此解决方案还可以轻松添加服务器端代码 (asp/php) 来处理禁用了 javascript 的用户。

演示:http://jsfiddle.net/DEv8z/2/

Javascript

function show(nr) {
    document.getElementById("table1").style.display="none";
    document.getElementById("table2").style.display="none";
    document.getElementById("table3").style.display="none";
    document.getElementById("table4").style.display="none";
    document.getElementById("table"+nr).style.display="block";
}

CSS

td {
    vertical-align: top;
}
#table1, #table2, #table3, #table4 {
    display: none;
}

HTML

Other things goes here ... <br /><br />

<table>
    <tr>
        <td>
            <a href="#" onclick='show(1);'>Table 1</a>
            <br />
            <a href="#" onclick='show(2);'>Table 2</a>
            <br />
            <a href="#" onclick='show(3);'>Table 3</a>
            <br />
            <a href="#" onclick='show(4);'>Table 4</a>
        </td>
        <td>
            &nbsp;
        </td>
        <td>
            <div id="table1"> Content of 1 </div>
            <div id="table2"> Content of 2 </div>
            <div id="table3"> Content of 3 </div>
            <div id="table4"> Content of 4 </div>        
        </td>
    </tr>
</table>

更新

为每个表使用一个文件如下所示:

table1.html

Other things goes here ... <br /><br />

<table>
    <tr>
        <td>
            <a href="table2.html">Table 2</a>
            <br />
            <a href="table3.html">Table 3</a>
            <br />
            <a href="table4.html">Table 4</a>
            <br />
            .....
        </td>
        <td>
            &nbsp;
        </td>
        <td>
            Content of 1
        </td>
    </tr>
</table>

-----------------------------------------------------

table2.html

Other things goes here ... <br /><br />

<table>
    <tr>
        <td>
            <a href="table1.html">Table 1</a>
            <br />
            <a href="table3.html">Table 3</a>
            <br />
            <a href="table4.html">Table 4</a>
            <br />
            .....
        </td>
        <td>
            &nbsp;
        </td>
        <td>
            Content of 2
        </td>
    </tr>
</table>

并且如果您可以使用服务器端包含并且您的“其他内容...”对于所有表都是相同的，您可以将该部分放入一个单独的文件中，该文件将注入(inject)每个表的内容。