JQuery on click load html

Я пытаюсь создать меню для своей личной веб-страницы, которое загрузит html-файл в div содержимого, когда я нажму на соответствующую ссылку в меню. Макет - это то, что я хочу, но, к сожалению, я не могу заставить событие click работать. Это то, что у меня есть:JQuery on click load html

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

Любая идея о том, что я сделал не так?

Спасибо.

EDIT: Удалена дополнительная вкладка в соответствии с комментарием Джо.

источник

2015-02-08 jorgehumberto

У вас есть дополнительная тег close.

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

Hi jorge, какая часть кодов не работает? Событие щелчка работает нормально, как проверено. – Joe

В основном, когда я нажимаю на ссылку меню, ничего не происходит, и файл 'about.html' не загружается в содержимое div. – jorgehumberto

Поскольку файл использовался ajax, вам необходимо загрузить свои файлы и протестировать его на сервере. В противном случае вы можете попытаться отключить веб-безопасность браузера Chrome и протестировать его локально. – Joe

JQuery on click load html

ответ

Смежные вопросы