javascript - 将 html 或 div 的内容加载到 div 中

标签 javascript jquery html

我有一套“礼”。单击每个“li”时,我想加载一个包含 html 页面内容的“div”。我已经在 stackoverflow 上阅读了一些答案并尝试了它们,但它们并没有帮助我完成这项工作。

这是现在正在尝试的代码

<!doctype html>
<html lang=''>
   <head>
      <meta charset='utf-8'>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="styles.css">
      <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      <script type="text/javascript">
      $(document).ready(function(){
         $("#page1").click(function(){
            $('#result').load('dst.html');
           //alert("Thanks for visiting!");
         }); 

         $("#page2").click(function(){
            $('#result').load('incf.html');
           //alert("Thanks for visiting!");
         });
       });
   </script>
   </head>
   <body>
      <header class="site-header-wrap">
         <div class="site-header">
            <h1>MY TOOL</h1>
         </div>
      </header>
      <div id='cssmenu'>
         <ul>
            <li class='active'><a href='#'><span>HOME</span></a></li>
            <li><a id="page1" href="#"><span>OPTION 1</span></a></li>
            <li><a id="page2" href="#"><span>OPTION 2</span></a></li>
            <li><a id="page3" href="#"><span>OPTION 3</span></a></li>  
         </ul>
      </div>
      <div id="result"></div>
   </body>
<html>

dst.html中的代码是

<html lang=''>
   <body>
      <p> In page 1(dst page) </p>
   </body>
<html>

我可以请求帮助吗?请找出我在这里做错了什么?

最佳答案

您的代码似乎对我来说大部分工作,我在您的代码中更改的唯一内容是将 $('#dblock').load('dst.html'); 更改为 $('#result').load('dst.html'); 因为没有 ID 为 #dblock

的 div

还要确保您的文件结构设置正确,并且 html 文件与您设置的内容一致,现在您应该在同一文件夹中拥有三个 html 文件

关于javascript - 将 html 或 div 的内容加载到 div 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32420391/

相关文章:

php - Ajax 调用有效;不再工作

javascript - jQuery + 返回被单击元素的函数

javascript - 文本超出列宽

html - 在背景图像上居中叠加文本

html - 距中心的CSS边距

javascript - Typescript 更新对象内的项目

javascript - Angular 2 HTTP 显示 JSON 特定值

javascript - 如何在 FLatList 中实现搜索栏 react native

javascript - jQuery 从列表中查找具有确切数字的 td

javascript - 我想要一个按钮,当单击它时,首先检查密码(如果密码是 abcd),然后显示另一个提交按钮,否则显示警报