HTML 代码示例：创建五个图标，点击显示不同页面
<!DOCTYPE html>
<html>
<head>
<style>
.icon {
width: 50px;
height: 50px;
background-color: #ccc;
display: inline-block;
margin-right: 10px;
cursor: pointer;
}
.icon:hover {
background-color: #aaa;
}
#page1, #page2, #page3, #page4, #page5 {
display: none;
height: 300px;
width: 400px;
background-color: #f2f2f2;
margin-top: 10px;
padding: 20px;
}
</style>
</head>
<body>
<div class='icon' onclick='showPage('page1')'>Icon 1</div>
<div class='icon' onclick='showPage('page2')'>Icon 2</div>
<div class='icon' onclick='showPage('page3')'>Icon 3</div>
<div class='icon' onclick='showPage('page4')'>Icon 4</div>
<div class='icon' onclick='showPage('page5')'>Icon 5</div>
<pre><code><div id='page1'>
<!-- Content for page 1 -->
</div>
<div id='page2'>
<!-- Content for page 2 -->
</div>
<div id='page3'>
<!-- Content for page 3 -->
</div>
<div id='page4'>
<!-- Content for page 4 -->
</div>
<div id='page5'>
<!-- Content for page 5 -->
</div>
</code></pre>
<script>
function showPage(pageId) {
var pages = document.querySelectorAll('[id^=page]');
for (var i = 0; i < pages.length; i++) {
pages[i].style.display = 'none';
}
document.getElementById(pageId).style.display = 'block';
}
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/ph7n 著作权归作者所有。请勿转载和采集!