时间戳

首页 > 解决方案 > 使用 Jquery 无法在 Div 中加载 html 页面

javascript - 使用 Jquery 无法在 Div 中加载 html 页面

问题描述

我正在尝试在单击链接时加载 Html 页面，但由于某种原因它根本不起作用。
这是我的 LogIn.HTML 页面： 

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script  type="text/javascript">
$(document).ready(function(){
    $("#game1").click(function(){
        $("#result1").load('Game.html');
    });
    $("#players").click(function(){
        $("#result1").load('players.html');
    });
});
</script>
</head>
<body>
  <table>
    <tr>
  <td><a  id="game1"  href="" style="color:white;">Game</a></td>
  </tr>
  <tr>
  <td><a href="" id="players"  style="color:white;">players</a></td>
  </tr>

  </table>

<div  id="result1" >
</div>
</body>
</html>

这是我的基本 Game.html（与 Players.html 相同的概念）： 

<!DOCTYPE>
<html>
<head>
  <h1>this is first game!!!</h1>
  </head>
</html>

我已经尝试了很多解决方案，但我无法让它工作，我也使用 chrome（不是本地主机，常规的）打开 html 页面，它会影响吗？

标签： javascriptjqueryhtml

解决方案

您可以尝试将脚本标签移至底部：如this SO中所建议

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <table>
        <tr>
            <td><a id="game1" href="" style="color:white;">Game</a></td>
        </tr>
        <tr>
            <td><a href="" id="players" style="color:white;">players</a></td>
        </tr>
    </table>
    <div id="result1"></div>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#game1").click(function(){
                $("#result1").load('https://full/path/to/Game.html');
            });
            $("#players").click(function(){
                $("#result1").load('https://full/path/to/players.html');
            });
        });
    </script>
</body>
</html>

更新：

  • 加上你错过了#in "game1"，在上面的例子中更正了。

  • 更正了#game1评论中指出的html

推荐阅读