<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>主页</title>
<style>
/* 页签样式 */
.tabs {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.tab {
display: inline-block;
padding: 10px 20px;
background-color: #eee;
border-radius: 5px 5px 0 0;
margin-right: 10px;
cursor: pointer;
user-select: none;
transition: all 0.2s ease;
}
.tab.active {
background-color: lightblue;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
}
/* iframe 样式 */
#page-content {
border: none;
width: 100%;
height: 100vh;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 页签 -->
<div class="tabs">
<div class="tab" data-index="0">rss监控</div>
<div class="tab" data-index="1">sap股票监控</div>
<div class="tab" data-index="2">页面3</div>
</div>
<!-- 内容区域 -->
<iframe id="page-content" src=""></iframe>
<script>
const pageUrls = [
'/rss',
'/sap',
'https://www.bing.com'
];
// 获取最近点击的页签
const lastTabIndex = localStorage.getItem('lastTab');
const initialTabIndex = (lastTabIndex !== null) ? parseInt(lastTabIndex) : 0;
// 切换页签时更新 iframe 的 src 属性，并记录最近点击的页签
function changeTab(index) {
// 切换 active 样式
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => tab.classList.remove('active'));
tabs[index].classList.add('active');
// 更新 iframe 的 src
const iframe = document.querySelector('#page-content');
iframe.src = pageUrls[index];
// 记录最近点击的页签
localStorage.setItem('lastTab', index);
}
// 绑定页签点击事件
const tabs = document.querySelectorAll('.tab');
tabs.forEach((tab, index) => {
tab.addEventListener('click', () => {
changeTab(index);
});
//设置data-index属性，方便获取
tab.setAttribute('data-index', index);
});
window.addEventListener('load', () => {
// 页面加载完成后切换到最近点击的页签
changeTab(initialTabIndex);
});
</script>
</body>
</html>
