html - iframe 中的导航栏
问题描述
我正在尝试建立一个带有顶部导航栏的仅限本地的网站。由于该站点将是多个页面,并且导航栏选项可能会经常更改,我想我可以使用 SSI 或类似的东西来引用所有页面。我在这里问过这个问题:如何为本地站点模拟 SSI
有人建议我使用 iframe,所以这就是我现在正在尝试的。但是,当菜单下拉时,它会停在 iframe 的底部。菜单 div 有没有办法从 iframe 中扩展出来?
解决方案
- 添加一个
<div class="nav"></div>
- 添加
<script src="nav.js"></script>
- 使用这样的东西:
var navDiv = document.getElementById("nav");
if (navDiv) {
var active = "/page3"; // location.pathname
var navHtml = `
<ul>
<li class="${active=="/home"?"active":""}">Home</li>
<li class="${active=="/about"?"active":""}">About</li>
<li class="${active=="/page1"?"active":""}">Page1</li>
<li class="${active=="/page2"?"active":""}">Page2</li>
<li class="${active=="/page3"?"active":""}">Page3</li>
<li class="${active=="/page4"?"active":""}">Page4</li>
<li class="${active=="/page5"?"active":""}">Page5</li>
</ul>`;
navDiv.innerHTML = navHtml;
// document.querySelector(".active").scrollIntoView();
var el = document.querySelector(".active")
navDiv.scroll({
top: el.offsetTop - 10,
behavior: 'smooth'
});
}
.active {
color: red
}
#nav {
overflow: auto;
height: 50px;
width: 100px;
border: 1px solid black;
}
<div id="nav"></div>
推荐阅读
- javascript - 使用 javascriot 将字节转换为 GB 并从 ng-repeat 中的列的总和中获取值
- git - Git:包含交互式变基的合并工作流程的快捷方式
- python - python中具有不同排列的大型数据集
- python - 使用 BeautifulSoup4 从 HTML 中提取字段
- ethereum - Solidity,私有函数不能返回值
- php - 如何在socket php中制作计时器
- css - 不确定表单字段的“焦点”是什么
- javascript - Firebase admin SDK + Vue + Webpack,TypeError: rtdb.initStandalone is not a function
- vb.net - 尝试通过 VB 表单将新记录提交到访问文件 [.mdb]
- reactjs - Moment.js 正在使用 React Big Calendar 将 Date 转换为 Today 日期