點擊加載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

回答

相關問題