如何通过单击菜单中的 Li 将 HTML 页面加载到 DIV 中?

2023-12-27

我遇到了一个非常烦人的问题。

所以,我的计划是制作一个包含不同含量锂的 UL 菜单。 当我单击它们中的每一个时,我想将一个新的 HTML 页面加载到我的“Content-DIV”中。

我做了很多研究,发现了 Ajax 和 Jquery。我尝试了很多不同的代码来使其工作,并且我成功地将我的 .js 文件链接到我的索引文件。我用简单的警报命令尝试了一下。 但是当我尝试将页面加载到 DIV 中时,它根本不起作用,而且我不知道出了什么问题! 我在 stackoverflow 上找到了一个几乎相同的链接,尽管他们没有使用菜单来打开页面。

所以这是我的索引:

<div id="Left">
    <ul id="nav" >
        <li><a href="Home.html id="load_home">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a>
    </ul>
</div>

<div id="content">


</div>

<script>$(document).ready( function() {
    $("#load_home").on("click", function() {
        $("#content").load("Home.html");
    });
 });
</script>

有任何想法吗?任何答案将不胜感激。 谢谢。

/Martin


您以错误的方式编写了 jQuery 代码 另外请确保您正在调用 jQuery 库文件。

JavaScript 代码

$(document).ready(function() {
  $('a').click(function(e) {
    e.preventDefault();
    $("#content").load($(this).attr('href'));
  });
});

HTML 代码

<div id="Left">
  <ul id="nav">
    <li><a href="page1.html">Home</a></li>
    <li><a href="page2.html">Page 1</a></li>
    <li><a href="page3.html">Page 2</a></li>
  </ul>
</div>
<div id="content">The page will display here</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何通过单击菜单中的 Li 将 HTML 页面加载到 DIV 中? 的相关文章

  • 设置股票数据 Highcharts xAxis 的格式

    我已经浏览了需要为 xAxis 属性设置的 Highcharts 选项来格式化时间标签 但没有运气了解这对于这种情况到底是如何工作的 我在白天 盘中 检索了股票的动态数据 我需要显示这些数据 因为检索的数据每天从 9 30 开始到 17 0
  • iPad 2 的 HTML5 源元素错误是否已修复?

    根据这个页面 http camendesign com code video for everybody webm http camendesign com code video for everybody webm 第一个 iPad 有一
  • json、rails、javascript 中的解析错误

    我需要将 ruby 数组放入 javascript 数组中 但出现解析错误 var characters 这就是我将 ruby 嵌入到内联 javascript 中的方式 但它出现了解析错误 我应该如何将此 ruby 数组放入 javasc
  • 将 ESLint 与 Airbnb 样式和选项卡结合使用 (React.js)

    我正在开发一个 React js 应用程序 并且正在尝试检查我的代码 我将 ESLint 与 Airbnb 风格一起使用 但出现以下错误 src Test jsx 4 2 error Unexpected tab character no
  • 更改文本框中一个字符的颜色 HTML/CSS [重复]

    这个问题在这里已经有答案了 我正在设计一个网站 我想问一下大家 如何通过CSS改变HTML文本框中字符串中的一个字符的颜色 示例 STACK OVER FLOW 只是 A 字母是红色的 你不能用常规方法做到这一点
  • 如何中和 CSS 定义而不覆盖

    有没有一种方法可以中和元素的 CSS 规则而不覆盖所有内容 例如 我正在使用 Twitter Bootstrap 它有许多预定义的 CSS 定义table 在某些地方 我不想要它们 对某些table元素 我想知道我是否可以做这样的事情 ta
  • 动态地将 .on() 方法与事件映射绑定

    我使用此语法来确保事件绑定动态添加li元素 ul list on click li function do something 我尝试使用这样的事件映射来存档相同的内容 ul list hammer css hacks false on s
  • 测量填写部分的时间 - 谷歌表单

    我正在尝试使用谷歌表单进行研究调查问卷 对于某些部分 我想自动测量用户填写所需的时间 谷歌表单中没有这样的选项 我尝试复制表单源 并用 javascript 填充时间 但它不起作用 跨源问题 未能成功托管复制的表单 如何做到 我如何衡量回答
  • 本地 401 工作,临时服务器得到 302

    我可能不会获得帮助第一次尝试所需的所有信息 但我会尽我所能 并在我们进行过程中对其进行编辑 我有一个使用 Spring Security Core 插件的 Grails 1 3 7 应用程序 我正在编写处理会话超时和 ajax 请求的代码
  • 使用jquery和coldfusion cffile上传多个文件

    不是一个真正的问题 只是想将其发布在某个地方 因为我在其他地方找不到它 现在我已经拼凑了一个工作演示 我想我会分享 这在 Coldfusion 和 Railo CFML 服务器上同样有 效 问题是 对于 CFML 开发人员来说 CFFILE
  • 两个日期之间间隔 15 分钟 javascript

    问题 我需要将两个日期 时间戳之间的所有 15 分钟时隙 日期格式 2016 08 10 16 00 00 创建为 HH mm 格式的数组 其中分钟限制为 00 15 30 45 示例 中午 12 30 到下午 2 30 将 gt 12 3
  • 如何反转媒体查询中元素的顺序?

    我有两个 div 左和右 但是当屏幕小于 500px 时 左 div 成为底部 div 右 div 成为顶部 div DOM 中的第一个 div 应该显示为第二个 第二个 div 为第一个 I use display flex 然后 div
  • Jquery获取每个div的子子div并将信息抓取到数组中

    我有一些看起来像这样的 html div div class sub main div div
  • SVG 剪辑路径在 Safari 上不起作用

    我有一个简单的动画 从下往上填充 svg 然后淡出 填充是使用clipPath随着使用path with a stroke dasharray stroke dashoffset 问题是clipPath在 Safari 上似乎完全被忽略了
  • 如何在 jQueryUI 工具提示中换行

    新版本的 jQueryUI 1 9 附带了本机工具提示小部件 经过测试 如果内容 标题属性的值 很短 它就可以正常工作 但如果内容很长 工具提示一旦显示就会与输入文本重叠 有a demo http jqueryui com tooltip
  • jQuery - 未捕获类型错误:对象 # 没有方法“parent”

    我的代码有问题 Chrome代码光谱仪说第21行有问题 问题如下 Uncaught TypeError Object
  • 两个 div 之间的匿名空白

    这里是Fiddle http jsfiddle net y6hSV 1 我有两个divs一个用于标题 另一个用于主体 在 的里面div这是标题 我还有另一个div那个 div 是floated left 因为那个floating 两者之间出
  • 右列固定的 Div 表

    我最近接手了一个非营利网站作为一个项目 我正在使用一个现有的网站 所以我必须使用很多已经编程的东西 所以我所要做的就是创建设计 I made a diagram of basically what I can t figure out ho
  • 允许 iframe 跨域链接到目标父框架

    我有 2 个域 域 1 上的一个页面使用 iframe 加载域 2 中的内容 如何允许来自domain2 iframe 内 的链接在domain1 的完整父框架中打开 我一直在关注IE和w3c的新沙箱属性 http www w3 org T
  • 开玩笑 setTimeout 不暂停测试

    it has working hooks async gt setTimeout gt console log Why don t I run expect true toBe true 15000 我已经查看了这个答案 Jest 文档和几

随机推荐