想利用jQuery做一个导航栏（在main.html内），点击其中一个可以在右边显示出网页来（本地写的html，exit.html），按照网上敲的代码不知道为什么就是显示不出来，orz兄弟姐妹们帮我看一看QAQ 感激不尽！
main.html：
<!DOCTYPE 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
<!DOCTYPE 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>
文件结构：
