Question

我想在div1中加载名为Introduction.html的HTML页面（与x.html位于同一文件夹中）。但是不加载。以下是x.html的代码段

x.html

<!DOCTYPE html>
<html>
<head >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").load("Introduction.html");
    });
});
</script>
</head>

<body>
<div id="div1"></div>

<button> 1.1 User</button>

<div id="cat" >
</div>

</body>
</html>

`

Answer 1

下面是在HTML中加载div元素中的任何文件的示例代码。

Sample.html

<!DOCTYPE html>
<html>
   <head>
      <script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>
      <script type="text/javascript">
         $(document).ready(function(){
            $("#page1").click(function(){
                $('#result').load('page1.html');
              //alert("Thanks for visiting!");
            }); 
          });
      </script>
   </head>
   <body>
      <input type='button' value='Load Page1' id="page1">
      <div id="result" style="clear:both;">
      </div>
   </body>
</html>

page1.html

<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
   </head>
   <body>
      <h1>Content of page1</h1>
   </body>
</html>

点击“加载页面”后，它将加载page1.html的内容

希望这有帮助！

Answer 2

您需要向此width提供height和div，以便查看我猜的内容。

#div1
{
height:200px; 
width:200px;
}

使用AJAX在div标签中显示html页面

2 个答案: