Я смог использовать ответы, представленные на странице загрузки HTML динамически, в div с jQuery для полной загрузки html в div в прошлом, однако, с новым проектом, который я начал, который основан на шаблоне codrops (multi- level push menu), страницы не загружаются в указанный .content div
Веб-страница находится здесь. Я загрузил все соответствующие jquery-библиотеки, а тестовая страница "bio.html" правильно исправлена.
Я работаю очень конкретно по первой ссылке меню " ul li " "Биография", чтобы просто проверить ее функциональность.
Код, который я использую в jquery, является
$(document).ready(function(){
$("#bio").click(function(){
$('.content').load('bio.html');
//alert("Thanks for visiting!");
});
});
Селектор "#bio" был применен к
<li><a class="icon icon-male" id="bio">Biography</a></li>
в index.html. В теге div класса = "content" у меня есть css,
.content {
color: white;
background: rgba(0,0,0,0.9);
background: -moz-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.9)), color-stop(100%, rgba(0,0,0,0.6)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
width: 60%;
border-radius: 2px;
padding: 3em 2em;
max-width: 1200px;
max-height: 800px;
margin: 0 auto;
box-shadow: 0 5px 7px -5px rgba(0,0,0,.7);
}
Я не знаю, вмешивается ли какой-либо из вышеперечисленного кода в то, что не позволяет динамически загружать страницу при нажатии на обработчик. Я внес изменения в class= "content" из класса = "content clearfix", потому что я не слишком беспокоюсь об использовании хакера clearfix в данный момент, что было единственным изменением в идентификации элемента в исходных файлах html.
вы вызвали библиотеку jQuery после своего скрипта, сначала вызовите jQuery, а затем ваш скрипт
и я рекомендую вам использовать версию 1.9.0 или более поздней.
Посмотрев на свою ссылку, вы загружаете файл jquery после того, как код для него "$" не определен, переместите вашу библиотеку jquery выше этого, и она должна начать работать.
$ is not defined
в моей консоли, любой также получить то же самое.js/linking.js
должен быть включен после jQuery.