gpt4 book ai didi

jquery - 需要帮助使用 jquery 加载 html 页面

转载 作者:太空宇宙 更新时间:2023-11-03 18:06:06 25 4
gpt4 key购买 nike

我正在使用 CSS、HTML 和 Jquery 新设计网页。我设计的页面只有标题部分。我想在不同的页面中使用的那个标题页。我提到了 Make header and footer files to be included in multiple html pages ,但仍然无法正常工作。

我有两个 html 文件。header.html 工作正常。检查它 jsfiddle.net/Binay_Kumar/3xqwh/2/

在我的第二页 header1.html 中,我想链接该 header.html 和第二页的其他一些内容。

编码

header.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="../CSS/stylenew.css"type="text/css" rel="stylesheet" />
<div id="header">
<div id="codeoverheader">
X SERVICES PVT. LTD. </div>
<div id="codeoverheader1">
Home|Logout
</div>
</div>
<div id="header1"></div>
<div id="header2"></div>
<div id="backgroundofmenu1"> <!--I have changed as backgroundofmenu1 instead of backgroungofmenu-->
</div>
<div id="menu1">
<a href="secondpage1.html" style="text-decoration:none" id="menucolor" >My HomePage</a></div>
<div id="menu1line1"> <!--i have changed from 1 to 11-->
| </div>
<div id="menu2">
<a href="#" style="text-decoration:none" id="menucolor" class="Mydata">My Data</a></div>
<div id="menu2line2"><!--i have changed from 2 to 21-->
|</div>
<div id="menu3">
<a href="secondpage2.html" style="text-decoration:none" id="menucolor">Policies And Info</a></div>
<div id="menu3line3"><!--i have changed from 1 to 31-->
| </div>
<div id="menu4">
<a href="secondpage3.html" style="text-decoration:none" id="menucolor">Help</a> </div>
</head>

它工作正常。

header1.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="../CSS/stylenew.css"type="text/css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$(function(){
$("#headerpage").load("header.html");
});
});
</script>
</head>
<body>
<div id="headerpage"></div>
<div id="hello">
hello
</div>
</body>

此页面存在一些问题。

样式新.css

 #header{ 
position:absolute;
top:0;
left:0;
width:100%;
height:header-<length>;
height:17%;
background-color:#004080;
}
#header1{
position:absolute;
top:15%;
left:0;
width:100%;
height:2%;
background-color:#9ABD2B; <!-- #CCFF33 first it was there -->
}
#hello{
left:300px;
top:200px;
position:absolute;
font-size:18px;
}

无论如何 CSS 工作正常,因为它太长了,所以我不分享。

问题是在运行 header1.html 时它只显示 hello 但我期待 header.html 页面内容以及 hello。

谁能告诉我我犯了什么错误?

最佳答案

您与 jQuery 的相对 URI 是错误的,因为您使用的是 file URI。您可以通过使用绝对 URI(以 httphttps 开头)来修复那个,但是您将遇到同源策略问题以使用本地文件上的 Ajax。

在您的开发机器上安装网络服务器,以便您在类似网络的环境中进行测试。

关于jquery - 需要帮助使用 jquery 加载 html 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24624757/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com