简单的侧边栏导航来填充主要内容
Posted
技术标签:
【中文标题】简单的侧边栏导航来填充主要内容【英文标题】：Simple Sidebar Navigation to populate main content 【发布时间】：2020-08-19 01:33:00 【问题描述】：首先，我知道这很简单，但我和你一样感到困惑，我自己无法弄清楚。我没有 web 开发背景，需要使用 github pages 来记录项目。很尴尬的时间，我一直在这上面旋转我的***。
问题的症结在于我正在尝试使用嵌套的 iframe，但是对于每一层，我都会得到另一个滚动条，并且没有任何滚动条完全同步。如果我设置 scrolling="no" 内容被隐藏。当我为侧栏使用框架时，这种情况会更加严重。
索引.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="mainheader">
<b> My Project Name
</b>
</div>
<body>
<div class="topnav">
<a href="overview.html" target="main_body">Overview</a>
<a href="important_concepts.html" target="main_body">Model Concepts/Patterns</a>
<a href="lineage.html" target="main_body">Data Lineage</a>
<a href="entity_metadata.html" target="main_body">Entity Details</a>
<a href="jargon.html" target="main_body">Jargon Glossary</a>
<a href="examples.html" target="main_body">Example Demos</a>
</div>
<!-- This creates a frame in the lower body, with an unwanted scroll bar, but it's not too bad. -->
<iframe name="main_body" src="overview.html" >
</body>
</html>
尝试做左侧边栏会带来更多问题。看起来我只是不明白框架之间的高度是如何继承的。该图显示了侧边栏如何不断堆叠，并且滚动并不完全同步。我尝试将高度提高到 100000 并隐藏滚动，但随后水平滚动也被消除了。
<!DOCTYPE html>
<html>
<link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">
<body>
<div class="container" style="display: flex; height:100%;">
<div style="display:inline-block;">
<iframe
src="cs_entity_sidebar.html"
name="cs_entity_sidebar"
frameborder="0"
scrolling="no"
align="left">
</iframe>
</div>
<iframe class="second-row"
name="main_overview_content"
scrolling = "yes"
height=10000
align="left"
>
</iframe>
</div>
</html>
这个网站有一个教程，几乎是我需要的，只是一个没有框架的简单布局
https://usefulangle.com/post/61/html-page-with-left-sidebar-main-content-with-css
操作sn-p：
<div id="main-container">
<div id="sidebar">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
<div id="content">Content Area</div>
</div>
但是如何让“内容区域”填充链接的 html？当我尝试在自己的 html 中执行此操作时，只是将我带到一个没有顶部导航的单独窗口。
这个问题也非常接近，但不包括如何使链接和导航正常工作。
此外，我已经阅读了 jquery/ajax 是更好的方法，但我在 ajax 中所做的一切都没有效果。我使用的是企业 ***，所以我认为存在一些代理问题。
感谢任何帮助。
编辑：Jquery/Ajax 方法不起作用。它没有失败，点击只是没有做任何事情。我尝试了各种来源，包括谷歌库，但 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" 是我所看到的我公司的其他项目。
注意屏幕截图，上面没有加载任何内容“以上来自脚本”
<html>
<head>
<!-- load ajax, file can also be loaded locally -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script>
/* create event handler that loads content into main area when navigation link is clicked */
$(document).ready(function ()
$('#link1').click(function()
$('#main_body').load('test.html');
);
);
</script>
</head>
<body>
<div class="mainheader">
<h3>My Project Name</h3>
</div>
<div class="topnav">
<a id="link1">Overview</a>
</div>
<!-- where you want the page to load -->
<div id="main_body"></div>
<div>Above is loaded from script</div>
<div>Below is loaded from a frame</div>
<iframe src="test.html" ></iframe>
</body>
</html>
edit2：检查视图错误
【问题讨论】：
【参考方案1】：如果我的理解正确，您正在尝试创建一个允许用户导航到新页面而不触发页面刷新的网站。这是动态网站的现代功能。
出于这个目的，使用 jquery/ajax 绝对比 iframe 更可取，因为与 iframe 相关的许多样式问题（想想响应式移动网页）。这是一个使用jquery/ajax实现的简单sn-p
index.html:
<html>
<head>
<!-- load ajax, file can also be loaded locally -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
/* create event handler that loads content into main area when navigation link is clicked */
$(document).ready(function ()
$('#link1').click(function()
$('#main_body').load('overview.html');
);
);
</script>
</head>
<body>
<div class="mainheader">
<h3>My Project Name</h3>
</div>
<div class="topnav">
<a id="link1">Overview</a>
</div>
<!-- where you want the page to load -->
<div id="main_body"></div>
</body>
</html>
overview.html：
<html>
<style>
#wrapper
background-color: yellow;
height: 200px;
</style>
<div id="wrapper">
<p>Dynamically loaded webpage</p>
</div>
</html>
link to a demo
请注意，动态加载内容时需要考虑一些安全问题。您可以在这个问题中阅读更多相关信息：Dynamic html page creation with jquery
编辑：您的代码在在线文本编辑器上运行良好。仅当您将网页托管在可以使用支持的协议方案（例如 http/https）加载页面的服务器上时，Ajax 才有效。
【讨论】：
感谢您的回答。这与我之前尝试过的方法几乎相同，但没有成功。我已将代码和屏幕截图添加到问题中。 您能否在单击链接后在检查器视图中包含控制台的屏幕截图？ 已添加。很好，我没有想到。至少我现在可以看到错误消息了。 我已经编辑了我的答案。这是一个简单的协议方案问题。 哇。我已经阅读了该语言十几次，但直到看到错误消息才单击它。通过本地网络服务器运行它后，它完全按预期工作。以上是关于简单的侧边栏导航来填充主要内容的主要内容，如果未能解决你的问题，请参考以下文章