Question

我正在尝试点击链接加载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（不是本地主机，常规名称）打开chrome页面，会影响吗？

Answer 1

您可以尝试将脚本标签移到底部：如本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>

更新：

此外，您还错过了#中的"game1"，已在上例中更正。
更正了#game1中的html，如注释中所指出的

Answer 2

您的代码$("game1")和$("players")缺少ID的＃标签标识符。应该是$("#game1")和$("#players")。

所以

$(document).ready(function(){
    $("#game1").click(function(){
        $("#result1").load('Game.html');
    });
    $("#players").click(function(){
        $("#result1").load('players.html');
    });
});

还要将<h1>元素放在<head>标签内。如果您希望看到结果，那么Game.html文件中应该包含以下内容：

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

还要确保该文件与LogIn.html页面位于同一目录中。

我还认为您需要指定要包含的元素，否则所有html都可能加载到该元素中。所以也许您的代码应该是：

$(document).ready(function(){
    $("#game1").click(function(){
        $("#result1").load('Game.html #body');
    });
    $("#players").click(function(){
        $("#result1").load('players.html #body');
    });
});

Answer 3

您可以通过链接轻松，便捷地修改当前<a>标签，以进行此类操作。例如，更改您的<a>标记并在其中包含href，如下所示：

<a id="game1"  href="./Game.html" style="color:white;">Game</a>

在这里您看到第二个问题。您引用的文件错误。要调出文件，您需要显示文件所在的文件夹。在这种情况下，“ ./”表示当前索引文件夹中的主要index.html文件是

。

如果您仍然希望使用JQuery进行此操作，那么这里有一个解决方法（如果您将相同文件夹中的Game.html和Players.html作为主要索引，则可以解决此问题） .html文件）

$("#game1").click(function(){
        $("#result1").load('./Game.html');
    });
    $("#players").click(function(){
        $("#result1").load('./players.html');
    });

此外，请注意文件引用区分大小写。在描述中，您写道需要加载 P layers.html，但是在代码中，您试图加载 p layers.html。

使用Jquery在div中无法加载html页面

3 个答案: