Добавление сценария jquery в мой html приводит к пустой странице

У меня есть рабочая html-страница, и я хочу использовать jquery для включения нижнего колонтитула. Однако всякий раз, когда я на самом деле помещаю jquery в тег, он заставляет страницу пустую, и я не уверен, что происходит не так.Добавление сценария jquery в мой html приводит к пустой странице

Вот сокращенная версия страницы:

<!DOCTYPE html> 
<html id="index-page"> 
<head> 
    <title>Data</title> 
    <!-- TODO: SEO goes here--> 
    <link rel="stylesheet" type="text/css" href="libs/normalize.css"> 
    <link rel="stylesheet" type="text/css" href="css/common.css"> 
    <link rel="stylesheet" type="text/css" href="css/index.css"> 

    <!-- Fonts --> 
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic"> 
</head> 
<body> 
    <h1> Stuff goes here </h1> 
    <h2> other stuff here </h2> 
    <div id="footer"></div> 

    <!-- ============== Scripts ============== --> 
     <!-- extern libs --> 
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- TODO: switch out with our cdn--> 
      <script> 
         $('#footer').load('footer.html'); 
      </script> 
     <!-- config/init --> 
      <script src="scripts/init.js"></script> 
      <!-- services --> 
      <!-- modules --> 
       <!-- These files bind DOM elements to the JS Application Logic --> 
       <script src="scripts/modules/indirect.hover.module.js"></script> 
    </body> 
</html>

Если я вынимаю теги, которые включают в себя код для загрузки footer.html, всё загружает нормально. Но как только я включаю те теги, страница пуста, и я не знаю почему.

свернутом версия footer.html выглядит следующим образом:

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="libs/normalize.css"> 
    <link rel="stylesheet" type="text/css" href="css/common.css"> 
    <link rel="stylesheet" type="text/css" href="css/index.css"> 
    <link rel="stylesheet" type="text/css" href="images/fonts/fonts.css"> 
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic"> 
    <script src="//code.jquery.com/jquery-1.11.0.js"></script> 
</head> 
<body> 
    <footer> 
    <h1>stuff here</h1> 
    </footer> 
</body> 
</html>

источник

2014-11-13 Mary

Если удалить весь ваш другой скрипт делает это работает? Можете ли вы опубликовать минимальный нерабочий код на JSFiddle, чтобы мы могли попробовать? –

** Сколько тэгов ** вы используете, чтобы попытаться загрузить внешний нижний колонтитул? Можете ли вы предоставить HTML-содержимое 'footer.html'? – PeterKA

Вот ссылка (http://www.w3schools.com/tags/tag_footer.asp), которую вы, возможно, будете интересовать для тега HTML

Используйте документ готов.

Также ... is footer.html Фактически файл доступен в каталоге, обслуживающем этот текущий файл?
Потому что, если нет ... это может быть случай, когда скрипт не находит файл. Возможно, вам нужно ('../footer.html') или что-то подобное. Проверьте структуру каталогов

 <script> 
     $(document).ready(function(){ 
      $('#footer').load('footer.html'); 
     }); 
     </script>

Судя по обновленному код, показывающий footer.html

Вы должны изменить файл колонтитула, чтобы быть просто

<footer> 
    <h1>stuff here</h1> 
    </footer>

Вот это .. Вам не нужно переобъявить ничего действительно. (скрипты, css head, html и т. д.) Просто загрузите контент.

Избавьтесь от DOCTYPE, CSS файлов и всех другие неактуальной код

источник

2014-11-13 00:43:20 KyleK

. Footer.html находится в той же папке, что и index.html, которая является страницей со сценарием, и я попытался использовать документ готов. Кажется, что страница загружается мгновенно, а затем она исчезает. – Mary

Спасибо, что сработало! – Mary

Добавление сценария jquery в мой html приводит к пустой странице

ответ

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