点击加载html时的JQuery

我尝试为我的个人网页建立一个菜单，当我点击菜单上相应的链接时，会将html文件加载到内容div中。布局是我想要的，但不幸的是我无法让点击事件工作。这是我有：点击加载html时的JQuery

<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>

和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; 
}

对我做了什么不对任何想法？

谢谢。

编辑：根据Joe的评论删除额外的标签。

来源

2015-02-08 jorgehumberto

你有一个额外的关闭标签。

$(document).ready(function() { 
     $('li.about').click(function(){ 
      $('#content').load('about.html'); 
     }); 
    //remove this }); 
     $('#research').click(function(){ 
      $('#content').load('about.html'); 
     }); 
    });

来源

2015-02-08 07:51:07 Joe

嗨jorge，哪部分代码没有工作？点击事件工作正常，经测试。 – Joe 2015-02-08 08:12:16

基本上，当我点击菜单链接时，没有任何反应，'about.html'文件不会被加载到内容div中。 – jorgehumberto 2015-02-08 08:14:19

由于该文件使用了ajax，因此您必须上传文件并在服务器上对其进行测试。否则，您可以尝试禁用Chrome浏览器的网络安全并在本地进行测试。 – Joe 2015-02-08 08:21:40

点击加载html时的JQuery

回答

相关问题