ruxia
95 lines
2.8 KiB
HTML
95 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>页面切换示例</title>
|
|
<style>
|
|
/* 隐藏按钮的样式 */
|
|
.hidden-buttons {
|
|
padding-left: 4px;
|
|
position: absolute;
|
|
z-index: 999999;
|
|
}
|
|
/* 显示按钮的样式 */
|
|
.show-buttons {
|
|
display: block;
|
|
}
|
|
/* 页面内容的样式 */
|
|
.page {
|
|
display: none;
|
|
}
|
|
.active {
|
|
display: block;
|
|
}
|
|
|
|
.hidden-buttons button {
|
|
cursor: pointer;
|
|
width: 52px;
|
|
height: 29px;
|
|
opacity: 0.01;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- 隐藏的按钮组 -->
|
|
<div id="buttonGroup" class="hidden-buttons">
|
|
<button onclick="showPage(0)">页面0</button>
|
|
<button onclick="showPage(1)">页面1</button>
|
|
<button onclick="showPage(2)" style=" width: 72px;">页面2</button>
|
|
<button onclick="showPage(3)" style=" width: 72px;">页面3</button>
|
|
<button onclick="showPage(4)" style=" width: 66px;">页面4</button>
|
|
<button onclick="showPage(5)" style=" width: 62px;">页面5</button>
|
|
<button onclick="showPage(6)" style=" width: 70px;">页面6</button>
|
|
<button onclick="showPage(7)" style=" width: 76px;">页面7</button>
|
|
<button onclick="showPage(8)" style=" width: 77px;">页面8</button>
|
|
</div>
|
|
|
|
<!-- 页面内容 -->
|
|
<div id="page1" class="page active">
|
|
<img src="主页.PNG" alt="页面1">
|
|
</div>
|
|
<div id="page2" class="page">
|
|
<img src="工程信息.PNG" alt="页面2">
|
|
</div>
|
|
<div id="page3" class="page">
|
|
<img src="取费设置.PNG" alt="页面3">
|
|
</div>
|
|
<div id="page4" class="page">
|
|
<img src="组合件.PNG" alt="页面4">
|
|
</div>
|
|
<div id="page5" class="page">
|
|
<img src="工程量.PNG" alt="页面5">
|
|
</div>
|
|
<div id="page6" class="page">
|
|
<img src="材机分析.PNG" alt="页面6">
|
|
</div>
|
|
<div id="page7" class="page">
|
|
<img src="工程费用.PNG" alt="页面7">
|
|
</div>
|
|
<div id="page8" class="page">
|
|
<img src="报表输出.PNG" alt="页面8">
|
|
</div>
|
|
|
|
<script>
|
|
// 显示页面的函数
|
|
function showPage(pageNumber) {
|
|
// 隐藏所有页面
|
|
var pages = document.querySelectorAll('.page');
|
|
pages.forEach(function(page) {
|
|
page.classList.remove('active');
|
|
});
|
|
|
|
// 显示指定页面
|
|
var pageToShow = document.getElementById('page' + pageNumber);
|
|
pageToShow.classList.add('active');
|
|
}
|
|
|
|
// 页面加载时显示第一个页面
|
|
window.onload = function() {
|
|
showPage(1);
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |