点击一个按钮以显示或隐藏表格 [英] Click a button to show or hide a table
问题描述
请参阅此问题附带的图片。我有四张桌子。当我点击某个表名（例如表1）时，我希望该表能够显示在右侧。当我点击其他表名称时，前一个应该消失并且应该显示一个。
我只知道html。所以，请告诉我这是否可以单独使用html完成。如果没有，我只能使用CSS和JavaScript（我对这两个都是新手，并会根据您的答案了解它们是否会有所帮助）。如果这只能使用这三种语言（即HTML，CSS和JavaScript）来实现，请告诉。 imgur.com/65mBI.pngalt =>
这是您启动的最简单方法。它为您提供了一种简单的方法来跟踪正在发生的事情和事情的工作方式。
此解决方案还可以轻松添加服务器端代码（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
其他的事情在这里......< br />< br />
< table>
< tr>
< td>
< a href =＃onclick ='show（1）;'>表1< / a>
< br />
< a href =＃onclick ='show（2）;'>表2< / a>
< br />
< a href =＃onclick ='show（3）;'>表3< / a>
< br />
< a href =＃onclick ='show（4）;'>表4< / a>
< / td>
< td>
& nbsp;
< / td>
< td>
< div id =table1> 1< / div>的内容
< div id =table2> 2< / div>的内容
< div id =table3> 3< / div>的内容
< div id =table4> 4< / div>的内容
< / td>
< / tr>
< / table>
更新
<每个表格使用一个文件如下所示：
table1.html
其他东西去这里...< br />< br />
< table>
< tr>
< td>
< a href =table2.html>表2< / a>
< br />
< a href =table3.html>表3< / a>
< br />
< a href =table4.html>表4< / a>
< br />
.....
< / td>
< td>
& nbsp;
< / td>
< td>
1
的内容< / td>
< / tr>
< / table>
------------------------------------------ -----------
table2.html
其他的东西在这里......< br />< br />
< table>
< tr>
< td>
< a href =table1.html>表1< / a>
< br />
< a href =table3.html>表3< / a>
< br />
< a href =table4.html>表4< / a>
< br />
.....
< / td>
< td>
& nbsp;
< / td>
< td>
2
的内容< / td>
< / tr>
< / table>
如果您可以使用服务器端包含并且您的其他东西....将是所有表格都是相同的，你可以把这个零件放在一个单独的文件中，每个表格内容都被注入。
Please see the picture attached with this question. I have four tables with me. When I click certain table name (eg Table 1), I want that table to get displayed in the right hand side. When I click on some other table name, previous one should disappear and present one should be displayed.
I know only html. So, please tell me if this can be done alone with html. If not, I am allowed to use only CSS and JavaScript (I am new to both of these and will learn if they will be helpful, depending on your answer). If this can be achieved using only these 3 languages (viz HTML, CSS and JavaScript), please tell.
Here is the simplest way for you to start. It gives you an easy way to follow what's going on and how things works.
Also with this solution it's easy to add a server side code (asp/php) to deal with users who has javascript disabled.
Demo: 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>
</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>
UPDATE
Using a file for each table would look like this:
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>
</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>
</td>
<td>
Content of 2
</td>
</tr>
</table>
And if you can use server side includes and your "Other things...." will be the same for all tables, you can put that part in a separete file which gets injected with the each table content.
这篇关于点击一个按钮以显示或隐藏表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
