gpt4 book ai didi

javascript - 如何在同一浏览器上交替显示两个网页内容而不重新加载?

转载 作者:行者123 更新时间:2023-12-01 01:26:08 25 4
gpt4 key购买 nike

实际上我已经创建了两页 Cordova 应用程序。我希望将它们放在一个页面中,并仅在单击事件后显示第二个内容,然后也返回到第一个内容。但想在第一次加载时加载整个页面。在下面的示例中,我创建了两个红色和蓝色的表。我想加载整个页面,但默认情况下仅显示红色,然后单击时显示蓝色。我想立即加载所有内容,但默认情况下仅显示红色,单击时显示蓝色。

<!DOCTYPE html>
<html>
<body>

<h2>Basic HTML Table</h2>

<table style="width:100%" bgcolor="red" height =500px>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<table style="width:100%" bgcolor="green"height=500px>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>

页面。

最佳答案

<!DOCTYPE html>
<html>
<body>

<h2>Basic HTML Table</h2>

<table id="pressme" style="width:100%" bgcolor="red" height =500px>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<table id="showme" style="width:100%;display:none;" bgcolor="green"height=500px>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<script>
var pressme = document.getElementById('pressme');
var showme = document.getElementById('showme');
pressme.addEventListener('click', function(){
pressme.style.display = 'none';
showme.style.display = 'block';
});
</script>
</body>
</html>

关于javascript - 如何在同一浏览器上交替显示两个网页内容而不重新加载?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53762154/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com