关于#jQuery#的问题，如何解决？
想利用jQuery做一个导航栏（在main.html内），点击其中一个可以在右边显示出网页来（本地写的html，exit.html），按照网上敲的代码不知道为什么就是显示不出来，orz兄弟姐妹们帮我看一看QAQ 感激不尽！
main.html：
html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>主页面title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">script>
<script>
$(document).ready(function() {
$("#exit").click(function(){
$("#content").load("templates\exit.html");
});
});
script>
<style>
body
{
background-color: #111111;
padding: 15px;
}
ul
{
list-style-type:none;
margin:0;
height:550px;
background-color: red;
float: left;
}
.nav-content
{
display:block;
font-weight:bold;
font-size: 130%;
font-family: 幼圆, YouYuan;
color:#e8e8e8;
background-color:#292929;
width:200px;
height: 108px;
text-align:center;
line-height: 98px;
text-decoration:none;
text-transform:uppercase;
border-style:none none double none;
border-width: 2px;
border-color: #343434;
transition-duration: 0.4s;
}
.nav-content:hover
{
font-weight:bold;
color:#08bf62;
background-color:#343434;
}
#content{
float:right;
background-color:yellow;
color:white;
width:78%;
height: 550px;
}
style>
head>
<body>
<ul class="nav">
<li class="nav-content" id="main_page">
主 页
li>
<li class="nav-content" id="detection">
新 闻 检 测
li>
<li class="nav-content" id="history">
历 史 数 据
li>
<li class="nav-content" id="specification">
使 用 说 明
li>
<li class="nav-content" id="exit">
退 出
li>
ul>
<div id="content">div>
body>
html>
exit.html
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>退出title>
<style>
* {
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
background-color:#121212;
}
.login-container {
width: 450px;
height: 315px;
margin: 0 auto;
margin-top: 10%;
border-radius: 15px;
box-shadow: 0 10px 50px 0px rbg(59, 45, 159);
background-color: #1e1e1e;
font-family: 幼圆, YouYuan;
}
.right-container {
width: 145px;
display: inline-block;
height: calc(100% - 120px);
vertical-align: top;
padding: 50px 0;
}
.regist-container {
width:450px;
margin: auto;
text-align: center;
color: #e8e8e8;
font-size: 180%;
font-weight: 200;
}
.regist-container span {
border-bottom: 10px double #343434;
}
.message{
width:450px;
margin: auto;
text-align: center;
color:#e8e8e8;
font-size: 120%;
padding: 70px 0;
}
.action-position {
width:420px;
margin: auto;
}
.action-container {
width:180px;
margin: auto;
font-size: 120%;
color: #e8e8e8;
text-align: center;
position:relative;
top: 50px;
}
.action-container span {
border: 1px solid #343434;
padding: 10px;
display: inline;
line-height: 20px;
border-radius: 20px;
width: 50%;
position: absolute;
bottom: 10px;
left: calc(72px - 20px);
transition: .2s;
cursor: pointer;
}
.action-container span:hover {
background-color: #343434;
color: #08bf62;
}
style>
head>
<body>
<div class="login-container">
<div class="right-container">
<div class="regist-container">
<span class="regist">退 出span>
div>
<div class="message">
感谢您的使用！请问您确定要退出吗?
div>
<div class="action-position">
<div class="action-container">
<span>退 出span>
div>
div>
div>
div>
body>
html>
文件结构：
通过使用浏览器内的开发者工具找到了错误，问题的解决办法参考下述链接~
希望大家可以互相讨论学习，一起进步！
https://blog.csdn.net/weixin_45749480/article/details/119936038?spm=1001.2014.3001.5506
该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下：
根据提供的代码和文件结构，似乎没有明显的错误。但是可能有以下几个问题：
1、 路径问题：在main.html中加载exit.html时，路径应该使用正斜杠/而不是反斜杠\，因为在web中反斜杠是转义字符。所以应该改为：
$("#content").load("templates/exit.html");
2、 服务器问题：如果您正在使用本地服务器，例如XAMPP或WAMP，则应该将main.html和exit.html放置在服务器的Web根目录中，例如XAMPP中的htdocs文件夹。然后在浏览器中通过http://localhost/main.html进行访问。
3、 jQuery库链接问题：您使用的jQuery链接可能已经过时或不可用。建议使用CDN链接，例如：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
请注意，我在此处使用的是CDN链接的最新版本。如果您仍然遇到问题，请检查浏览器的开发者工具控制台，以查看是否有任何JavaScript错误或文件加载错误。
如果以上回答对您有所帮助，点击一下采纳该答案～谢谢