javascript JQuery点击加载html
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28391729/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery on click load html
提问by jorgehumberto
I am try to build a menu for my personal webpage which would load a html file into a contents div when I click on the corresponding link on the menu. The layout is what I want, but unfortunately I cannot get the click event to work. This is what I have:
我正在尝试为我的个人网页构建一个菜单，当我单击菜单上的相应链接时，该菜单会将 html 文件加载到内容 div 中。布局是我想要的，但不幸的是我无法让点击事件起作用。这就是我所拥有的：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jorge Martins' HomePage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" media="all" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script language="javascript">
$(document).ready(function () {
$('li.about').click(function(){
$('#content').load( 'about.html' );
});
$('#research').click(function(){
$('#content').load( 'about.html' );
});
});
</script>
</head>
<body>
<div>
<ul class="menu">
<li id="home">Home</li>
<li class="about">About me</li>
<li id="research">Research</li>
<li id="publications">Publications</li>
</ul>
</div>
<div id="content">
</div>
</body>
</html>
and the css:
和CSS：
ul.menu {
margin: 0;
padding: 0;
float:left;
width: 15%;
margin: 10px;
}
ul.menu li {
list-style: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:24px;
font-weight:bold;
color: #555;
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
ul.menu li:hover {
color: #FFF;
/*padding: 0px 0 0 0px;*/
}
#content {
width: 75%;
float:left;
margin: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #555;
}
Any idea on what I've done wrong?
知道我做错了什么吗？
Thanks.
谢谢。
EDIT: Removed extra tab as per Joe's comment.
编辑：根据乔的评论删除了额外的标签。
回答by Joe
You have an extra close tag.
你有一个额外的关闭标签。
$(document).ready(function () {
$('li.about').click(function(){
$('#content').load( 'about.html' );
});
//remove this });
$('#research').click(function(){
$('#content').load( 'about.html' );
});
});
