个人中心
gpt4 book ai didi

html - 简单的侧边栏导航来填充主要内容

转载 作者：行者123 更新时间：2023-12-01 04:33:06 24 4
gpt4 key购买 nike

首先，我知道这很简单，我和你一样困惑，我自己无法弄清楚。我没有 Web 开发背景，需要使用 github 页面来记录元素。我已经在这上面浪费了一段令人尴尬的时间。

问题的关键是我正在尝试使用嵌套的 iframe，但是对于每一层，我都会得到另一个滚动条，并且没有任何滚动条完全同步。如果我设置滚动=“否”内容将被隐藏。当我在侧边栏上使用框架时，这种情况会更加严重。

索引.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" height="100%" width="100%">

</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" 
            width="100%" 
            align="left">
      </iframe> 

    </div>
      <iframe  class="second-row" 
          name="main_overview_content" 
          scrolling = "yes"
          height=10000 
          align="left"
        >
      </iframe>
</div>

</html>

Extra scrolling这个网站有一个教程，几乎是我所需要的，只是一个没有框架的简单布局

https://usefulangle.com/post/61/html-page-with-left-sidebar-main-content-with-css

操作片段:

<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 中所做的一切都没有效果。我使用的是公司 VPN，因此我认为存在一些代理问题。

感谢任何帮助。

编辑: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>

Not working as expected

edit2:检查 View 错误

enter image description here

最佳答案

如果我理解正确的话，您正在尝试创建一个网站，让用户导航到新页面而不触发页面刷新。这是动态网站的现代功能。

出于此目的，使用 jquery/ajax 绝对优于 iframe，因为存在许多与 iframe 相关的样式问题(考虑响应式移动网页)。这是使用 jquery/ajax 实现的简单代码片段

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>

概述.html:

<html>
<style>
  #wrapper {
    background-color: yellow;
    height: 200px;
  }
</style>

<div id="wrapper">
  <p>Dynamically loaded webpage</p>
</div>
</html>

enter image description here enter image description here

link to a demo

请注意，动态加载内容时需要考虑一些安全问题。您可以在这个问题中阅读更多相关信息:Dynamic html page creation with jquery

编辑:您的代码在在线文本编辑器上运行良好。仅当您将网页托管在可以使用受支持的协议(protocol)方案(例如 http/https)加载页面的服务器上时，Ajax 才有效。

关于html - 简单的侧边栏导航来填充主要内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61595367/

24 4 0
文章推荐： python - 如何使文件夹登陆页面看起来像 Plone 门户中子站点的初始页面？
文章推荐： c# - Java(我的世界)不是从 C# 开始的
文章推荐： java - 基于 JDBC 的工具来导入/导出数据库模式
文章推荐： Python:替换字符串中的十进制数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com