我有一套“礼”。单击每个“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
还要确保您的文件结构设置正确,并且 html 文件与您设置的内容一致,现在您应该在同一文件夹中拥有三个 html 文件
关于javascript - 将 html 或 div 的内容加载到 div 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32420391/