Jquery .load «не может получить»

Question

Jquery .load «не может получить»

0

Я использую.load для переключения содержимого в div #content, но когда я нажимаю на ссылку, она выводит меня на белую страницу с надписью "can not get/index" или что-то еще. Начальное содержимое загружается, поэтому я знаю первые три строки работы кода. Любые идеи, почему я не могу получить другие мои файлы?

Здесь мой HTML

<div id="nav">

    <ul>
        <li><a href="index">Home</a></li>
        <li><a href="portfolio">Portfolio</a></li>
        <li><a href="about">About</a></li>
    </ul>

</div>

И JQuery

$(document).ready(function() {
    // initial
    $('#content').load('content/index.html');

    // handle menu clicks
    $('ul#nav li a').click(function() {
        var page = $(this).attr('href');
        $('#content').load('content/' + page + '.html');
        return false;
    });
});

user3464627 05 май 2014, в 17:08

Источник

0

это Portfolio.html или portfolio.html ?
Mohammad Adil 05 май 2014, в 14:15
0

Проверьте правильность запрошенного URL. Вы можете сделать это с помощью Firebug или аналогичных инструментов разработчика. Нажмите F12 в браузере, чтобы вызвать инструменты разработки.
KBN 05 май 2014, в 14:15
0

его нижний регистр @MohammadAdil, я проверял. Ну, я уверен, что это так, так как index.html находится вместе с портфелем и
user3464627 05 май 2014, в 14:17
0

У вас есть Portfolio --> Прописные буквы P в вашем href. который попытается загрузить Portfolio.html
Mohammad Adil 05 май 2014, в 14:19
0

извини, я изменил это после того, как надену это Я сейчас отредактирую
user3464627 05 май 2014, в 14:20
0

Вы видите какую-либо ошибку на консоли?
Mohammad Adil 05 май 2014, в 14:22
0

Можете ли вы опубликовать полный ul ? Я подозреваю, что ваш html не совсем соответствует используемому селектору jquery. Вы используете $('ul#nav li a') но ваши a находятся на том же уровне, и они не вложены в li Поэтому событие click даже не связывается вообще
brainless coder 05 май 2014, в 14:22
0

"Кодировка символов в текстовом документе не была объявлена. Документ будет отображаться с искаженным текстом в некоторых конфигурациях браузера, если документ содержит символы вне диапазона US-ASCII. Кодировку символов файла необходимо объявить при передаче протокол или файл должны использовать метку порядка байтов в качестве подписи кодировки. " Это из консоли, когда я нажимаю на ссылку
user3464627 05 май 2014, в 14:24
0

его в редакции @Mahmud
user3464627 05 май 2014, в 14:27
0

Разместил ответ ниже :)
brainless coder 05 май 2014, в 14:28

Показать ещё 8 комментариев

Теги:

javascript

jquery

html

3 ответа

0

Согласно вашему правлению

У вас неправильный селектор jQuery, это должно быть -

$('#nav ul li a').click...

Mohammad Adil 05 май 2014, в 12:32

0

return false; из кода должен позаботиться об этой проблеме
Spokey 05 май 2014, в 14:18

0

Когда содержимое загружается динамически, действия над элементами html не будут улавливаться прямой.click() function So:

Используйте $(document).on('click', 'ul#nav li a', function() {

Вместо $('ul#nav li a').click(function() {

Это работало для меня

Shashikumar Misal 05 май 2014, в 12:27

Ещё вопросы

Проверьте правильность запрошенного URL. Вы можете сделать это с помощью Firebug или аналогичных инструментов разработчика. Нажмите F12 в браузере, чтобы вызвать инструменты разработки.
его нижний регистр @MohammadAdil, я проверял. Ну, я уверен, что это так, так как index.html находится вместе с портфелем и
У вас есть Portfolio --> Прописные буквы P в вашем href. который попытается загрузить Portfolio.html
извини, я изменил это после того, как надену это Я сейчас отредактирую
Вы видите какую-либо ошибку на консоли?
Можете ли вы опубликовать полный ul ? Я подозреваю, что ваш html не совсем соответствует используемому селектору jquery. Вы используете $('ul#nav li a') но ваши a находятся на том же уровне, и они не вложены в li Поэтому событие click даже не связывается вообще
"Кодировка символов в текстовом документе не была объявлена. Документ будет отображаться с искаженным текстом в некоторых конфигурациях браузера, если документ содержит символы вне диапазона US-ASCII. Кодировку символов файла необходимо объявить при передаче протокол или файл должны использовать метку порядка байтов в качестве подписи кодировки. " Это из консоли, когда я нажимаю на ссылку
return false; из кода должен позаботиться об этой проблеме

brainless coder · Accepted Answer · 2014-05-05T12-34-00.000Z

Вот ответ -

$(document).ready(function() {
    // initial
$('#content').load('content/index.html');

// handle menu clicks
$('div#nav ul li a').click(function() {
    var page = $(this).attr('href');
    $('#content').load('content/' + page + '.html');
    return false;
});
});

В скором времени #nav является идентификатором div не ul поэтому $('ul#nav li a'). должно быть $('div#nav ul li a'). точнее $('div#nav > ul > li > a').

Если вы хотите, чтобы анимация была похожа на Fade, попробуйте это -

$('div#nav ul li a').click(function() {
    var page = $(this).attr('href');
    $('#content').fadeOut('fast', function(){
        $('#content').load('content/' + page + '.html', function(){
            $('#content').fadeIn('fast');
        });
    });
    return false;
});

Но для скользящей анимации это будет немного сложно, потому что вам нужно что-то делать -

Кулак слайда слева от анимации ширины
Затем возьмите div в правый конец окна, используя css left
Загрузите его и сделайте ширину нормальной
измените left чтобы он снова скользил влево.

Это даст вам пространство между анимациями, но если вы хотите безразличную анимацию, вам придется использовать больше div и немного больше логик. Счастливые эксперименты.. :)

Я не могу поверить, что я пропустил это! Спасибо большое!
Немного не по теме ... Но как мне тогда сделать переходы между страницами более плавными? как летать слева? или исчезать?
Обновил мой ответ с помощью fade, но слайд немного сложен, поэтому просто описал один из способов сделать слайд, оставил его для себя, чтобы попробовать .. :)