coder-xiaomo/tools
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity GitHub Gitee

父html下方导航栏动态渲染

Browse Source
This commit is contained in:
程序员小墨 2022-07-29 16:51:28 +08:00
parent 8f808a0422
commit ea7bf84f1d
1 changed files with 42 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
index.html
View File

@ -39,6 +39,7 @@
background-color: #fdfdfd;
box-shadow: 0 -2px 10px 0 rgb(0 0 0 / 10%);
display: grid;
/* grid-template-columns: repeat(3, 1fr); */
place-items: center;
}
@ -72,24 +73,49 @@
<div id="iframe-container">
<!-- <iframe src="html/weibo.html" frameborder="0"></iframe> -->
</div>
<div id="float-container" class="bt" style="grid-template-columns: repeat(3, 1fr);">
<div class="navbar-item" targetPage="weibo_hotband">
<div id="float-container" class="bt">
<!-- <div class="navbar-item" targetPage="weibo_hotband">
<img class="navbar-image" src="./html/assets/image/weibo.svg" />
<p class="navbar-title">微博热搜</p>
</div>
<div class="navbar-item" targetPage="bilibili_rank">
<img class="navbar-image" src="./html/assets/image/icon_rank.png" />
<p class="navbar-title">B站排行</p>
</div>
<div class="navbar-item" targetPage="bilibili_hotband">
<img class="navbar-image" src="./html/assets/image/bilibili.svg" style="transform: scale(0.87);" />
<p class="navbar-title">B站热搜</p>
</div>
</div> -->
</div>
</div>
<script>
let pages = ['weibo_hotband', 'bilibili_rank', 'bilibili_hotband'];
let pages = {
'weibo_hotband': {
title: '微博热搜',
// url: 'html/weibo_hotband.html',
icon: './html/assets/image/weibo.svg',
icon_scale: 1,
},
'bilibili_rank': {
title: 'B站排行',
// url: 'html/bilibili_rank.html',
icon: './html/assets/image/icon_rank.png',
icon_scale: 1,
},
'bilibili_hotband': {
title: 'B站热搜',
// url: 'html/bilibili_hotband.html',
icon: './html/assets/image/bilibili.svg',
icon_scale: 0.87,
},
};
// 渲染导航栏
for (let key in pages) {
let page = pages[key];
let navbarItem = document.createElement('div');
navbarItem.className = 'navbar-item';
navbarItem.setAttribute('targetPage', key);
navbarItem.innerHTML = `
<img class="navbar-image" src="${page.icon}" ${page.icon_scale != 1 ? `style="transform: scale(${page.icon_scale});"` : ''} />
<p class="navbar-title"> ${page.title}</p>
`;
document.getElementById('float-container').style.gridTemplateColumns = `repeat(${Object.keys(pages).length}, 1fr)`;
document.getElementById('float-container').appendChild(navbarItem);
}
</script>
<script>
let navbarItems = document.querySelectorAll('.navbar-item');
let iframeContainer = document.querySelector('#iframe-container');
let iframe = document.querySelector('iframe');
@ -131,8 +157,8 @@
// 获取 url 中的 target 参数
let url = new URL(window.location.href);
let target = url.searchParams.get('target');
if (!pages.includes(target)) {
target = 'weibo';
if (!Object.keys(pages).includes(target)) {
target = 'weibo_hotband';
history.replaceState(null, null, `./index.html?target=${target}`);
}
// 切换页面