我已经弄清楚如何在文本之间切换，但无法找到如何在文本和表格之间切换。我需要做什么才能在单击按钮时将文本更改为表格并将表格更改为文本？我试过将 html 插入到 js 函数中<!DOCTYPEhtml><body> <script> function home() { var x = document.getElementById('myid') const home = "home"; if (x.innerHTML !== home) { x.innerHTML = home } else { x.innerHTML = home } } function percentages() { var x = document.getElementById('myid') const percent = "percent"; if (x.innerHTML !== percent) { x.innerHTML = percent; } else { x.innerHTML = percent; } } </script> <div> <nav> <ul> <li> <p><button onclick="home()">Home</button></p> </li> <li> <p><button onclick="percentages()">Percentages</button></p> </li> </ul> </nav> <div id="myid">home</div> </div> <table style="width:100%"> <tr> <th>Level</th> <th>How many levels</th> </tr> <tr> <td>4+</td> <td><input id="4p" type="levels" placeholder="number of levels"></td></body></html>
1 回答
慕莱坞森
TA贡献1810条经验 获得超4个赞
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".show-text").toggleClass("show-table");
});
});
</script>
<style>
.show-text p{
display: block
}
.show-text table{
display: none
}
.show-text.show-table p{
display: none
}
.show-text.show-table table{
display: block
}
</style>
</head>
<body>
<div class="show-text">
<p>any text</p>
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
<button>toggle</button>
</body>
</html>
Js Fiddle 这里https://jsfiddle.net/vsdbL614/
添加回答
举报
0/150
提交
取消