所以目前我已经制作了 2 个表格，其中包含信息。但我想这样做，当用户打开 html 文档时，它只显示 1 个表，您可以在不同的表之间切换。当我单击表 1 的按钮时，它会隐藏表 2，当我单击表 2 的按钮时，它会隐藏表 1。function myFunction() { var x = document.getElementById("Tables"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; }}function myFunction1() { var x = document.getElementById("Tables1"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; }}#Tables { width: 100%; padding: 50px 0; text-align: center; background-color: blue; margin-top: 20px;}#Tables1 { width: 100%; padding: 50px 0; text-align: center; background-color: Purple; margin-top: 20px;}table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%;}td,th { border: 1px solid #dddddd; text-align: left; padding: 8px;}tr:nth-child(even) { background-color: #dddddd;}<button onclick="myFunction()">Click!</button> <button onclick="myFunction1()">Click!</button><div id="Tables"> <table> <tr> <th>Cost</th> <th>Name</th> <th>Country</th> </tr> <tr> <td>Price</td> <td>Names</td> <td>Place</td> </tr> </table></div><div id="Tables1"> <table> <tr> <th>Cost</th> <th>Name</th> <th>Country</th> </tr> <tr> <td>Price</td> <td>Names</td> <td>Place</td> </tr> </table></div>
3 回答
SMILET
TA贡献1796条经验 获得超4个赞
使用单个选择。并给你想要隐藏的表隐藏的属性并使用下面给出的javascript
function myFunction() {
var tables = document.getElementsByClassName("toggletable");
var targetval = document.getElementById("select").value;
for(var i = 0; i < tables.length; i++){
if(targetval == i + 1){
tables[i].removeAttribute("hidden");
}else{
tables[i].setAttribute("hidden", true);
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#Tables {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: blue;
margin-top: 20px;
}
#Tables1 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: Purple;
margin-top: 20px;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<select id="select" onchange="myFunction()">
<option value="1" >Table 1</option>
<option value="2">Table 2</option>
<option value="3">Table 3</option>
<option value="4">Table 4</option>
<option value="5">Table 5</option>
</select>
<div id="Tables" class="toggletable">
<table>
<tr>
<th>Cost</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Price1</td>
<td>Names1</td>
<td>Place1</td>
</tr>
</table>
</div>
<div id="Tables1" class="toggletable" hidden>
<table>
<tr>
<th>Cost</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Price2</td>
<td>Names2</td>
<td>Place2</td>
</tr>
</table>
</div>
<div class="toggletable" hidden>
<table>
<tr>
<th>Cost</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Price3</td>
<td>Names3</td>
<td>Place3</td>
</tr>
</table>
</div>
<div class="toggletable" hidden>
<table>
<tr>
<th>Cost</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Price4</td>
<td>Names4</td>
<td>Place4</td>
</tr>
</table>
</div>
<div class="toggletable" hidden>
<table>
<tr>
<th>Cost</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Price5</td>
<td>Names5</td>
<td>Place5</td>
</tr>
</table>
</div>
<script>
function myFunction() {
var tables = document.getElementsByClassName("toggletable");
var targetval = document.getElementById("select").value;
for(var i = 0; i < tables.length; i++){
if(targetval == i + 1){
tables[i].removeAttribute("hidden");
}else{
tables[i].setAttribute("hidden", true);
}
}
}
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消