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
Download Patch File Download Diff File Expand all files Collapse all files

58
index.html
View File

@@ -39,6 +39,7 @@
background-color: #fdfdfd; background-color: #fdfdfd;
box-shadow: 0 -2px 10px 0 rgb(0 0 0 / 10%); box-shadow: 0 -2px 10px 0 rgb(0 0 0 / 10%);
display: grid; display: grid;
/* grid-template-columns: repeat(3, 1fr); */
place-items: center; place-items: center;
} }
@@ -72,31 +73,56 @@
<div id="iframe-container"> <div id="iframe-container">
<!-- <iframe src="html/weibo.html" frameborder="0"></iframe> --> <!-- <iframe src="html/weibo.html" frameborder="0"></iframe> -->
</div> </div>
<div id="float-container" class="bt" style="grid-template-columns: repeat(3, 1fr);"> <div id="float-container" class="bt">
<div class="navbar-item" targetPage="weibo_hotband"> <!-- <div class="navbar-item" targetPage="weibo_hotband">
<img class="navbar-image" src="./html/assets/image/weibo.svg" /> <img class="navbar-image" src="./html/assets/image/weibo.svg" />
<p class="navbar-title">微博热搜</p> <p class="navbar-title">微博热搜</p>
</div> </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> </div>
<script> <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 navbarItems = document.querySelectorAll('.navbar-item');
let iframeContainer = document.querySelector('#iframe-container'); let iframeContainer = document.querySelector('#iframe-container');
let iframe = document.querySelector('iframe'); let iframe = document.querySelector('iframe');
navbarItems.forEach(item => { navbarItems.forEach(item => {
item.addEventListener('click', () => { item.addEventListener('click', () => {
// 已选中项再次点击，不执行操作 // 已选中项再次点击，不执行操作
if(item.classList.contains('active')) return; if (item.classList.contains('active')) return;
navbarItems.forEach(item => { navbarItems.forEach(item => {
item.classList.remove('active'); item.classList.remove('active');
@@ -131,8 +157,8 @@
// 获取 url 中的 target 参数 // 获取 url 中的 target 参数
let url = new URL(window.location.href); let url = new URL(window.location.href);
let target = url.searchParams.get('target'); let target = url.searchParams.get('target');
if (!pages.includes(target)) { if (!Object.keys(pages).includes(target)) {
target = 'weibo'; target = 'weibo_hotband';
history.replaceState(null, null, `./index.html?target=${target}`); history.replaceState(null, null, `./index.html?target=${target}`);
} }
// 切换页面 // 切换页面