使用Jquery在div中无法加载html页面
[英]html page doesn't load in Div using Jquery
问题描述
i'm trying to load Html page on click on a link , but for some reason it doesn't work at all . 
我正在尝试在链接上单击以加载HTML页面，但由于某种原因，它根本无法正常工作。
this is my LogIn.HTML page : 这是我的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>
AND this is my basic Game.html (the Players.html same concept): 并且这是我的基本Game.html（Players.html的相同概念）：
<!DOCTYPE> <html> <head> <h1>this is first game!!!</h1> </head> </html>
i've tried many solutions but i can't make it work , also i open the html page using chrome (not localhost,regular one) does it affects ? 我已经尝试了许多解决方案，但是我无法使其正常工作，而且我使用chrome（不是本地主机，常规主机）打开chrome页面会影响吗？
3 个解决方案
解决方案1
2 2018-11-09 07:18:20
You could try moving the script tag to the bottom: as suggested in this SO 您可以尝试将脚本标签移到底部：如本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>
Update: 更新：
Plus you missed a
#in"game1", corrected in the above example.另外，您错过了"game1"的#，已在上例中更正。Corrected the html in
#game1as pointed out in the comments修正了#game1中指出的#game1的html
解决方案2
1 2018-11-09 07:18:02
Your code $("game1") and $("players") is missing the # tag identifier for ID's. 您的代码$("game1")和$("players")缺少ID的＃标签标识符。 It should be $("#game1") and $("#players") ., 应该是$("#game1")和$("#players") 。，
So 所以
$(document).ready(function(){
$("#game1").click(function(){
$("#result1").load('Game.html');
});
$("#players").click(function(){
$("#result1").load('players.html');
});
});
Also you've place the <h1> element inside the <head> tag. 同样，您已经将<h1>元素放置在<head>标记内。 If you wish to see a result you should have the following inside the Game.html file: 如果希望看到结果，则Game.html文件中应包含以下内容：
<!DOCTYPE>
<html>
<head>
</head>
<body>
<h1>this is first game!!!</h1>
</body>
</html>
Also make sure that the file is in the same directory as the LogIn.html page. 还要确保该文件与LogIn.html页面位于同一目录中。
I also believe you need to specify which element you want to include otherwise all the html might get loaded into the element. 我也相信您需要指定要包括的元素，否则所有的html都可能加载到该元素中。 So maybe your code should be: 因此，也许您的代码应该是：
$(document).ready(function(){
$("#game1").click(function(){
$("#result1").load('Game.html #body');
});
$("#players").click(function(){
$("#result1").load('players.html #body');
});
});
解决方案3
0 2018-11-09 07:28:27
You can easily modify your current <a> tag for this kind of action with a link, its easier and also faster. 您可以通过链接轻松地修改当前<a>标记，以实现这种操作，该链接更容易也更快。 For example, change your <a> tag and include in it href, like this: 例如，更改您的<a>标记并将其包含在href中，如下所示：
<a id="game1" href="./Game.html" style="color:white;">Game</a>
And here you see the second problem. 在这里，您会看到第二个问题。 You are referencing the file wrong. 您引用的文件错误。 To call out a file, you need to show in what folder its in. In this case "./" means in the current folder your main index.html file is. 要调出文件，您需要显示文件所在的文件夹。在这种情况下，“ ./”表示当前index.html文件位于主文件夹中。
If you still want to stick with JQuery for this action, then here is a fix for you (provided if you have your Game.html and Players.html in the same folder as your main index.html file) 如果您仍然希望使用JQuery执行此操作，那么这里有一个解决方法（如果您将Game.html和Players.html 与主index.html文件放在同一文件夹中）
$("#game1").click(function(){
$("#result1").load('./Game.html');
});
$("#players").click(function(){
$("#result1").load('./players.html');
});
Also, be mindful that the file references are case sensitive. 另外，请注意文件引用区分大小写。 In your description you wrote that you need to load P layers.html, but in code youre trying to load p layers.html. 在你的描述，你写的，你需要负荷P layers.html，但在代码youre设法负荷P layers.html。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.