单击一个按钮以显示或隐藏表格

Question

请参阅附带此问题的图片。我有四张桌子。当我单击某些表名称（例如表1）时，我希望该表显示在右侧。当我单击其他表名时，上一个应消失，而现在应显示一个。
我只知道html。因此，请告诉我是否可以单独使用html完成。如果没有，我只能使用CSS和JavaScript（这两种方法都是我的新手，将根据您的回答了解它们是否会有所帮助）。如果只能使用这三种语言（即HTML，CSS和JavaScript）实现此目标，请告诉。

Answer 1

这是您最简单的开始方法。它为您提供了一种简单的方法来跟踪正在发生的事情以及工作原理。

同样，通过此解决方案，可以轻松添加服务器端代码（asp / php）来处理禁用了javascript的用户。

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

Java脚本

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>

并且，如果您可以使用服务器端包含，并且所有表的“ Other ....”都相同，则可以将该部分放在一个单独的文件中，该文件随每个表内容一起注入。