2016-10-18 2 views
1

Я написал боковую панель моей страницы в файле HTML. Я хочу включить ту же самую боковую панель на все мои HTML-страницы. Как включить HTML-файл боковой панели в, скажем, файл Dashboard.html, чтобы боковая панель была видимой?Как включить HTML-панель на странице HTML?

Если это невозможно, можете ли вы предоставить альтернативные решения?

+0

Посмотрите здесь: HTTP: // StackOverflow. com/questions/8988855/include-another-html-file-in-a-html-файл Возможно, это поможет вам – Arkej

+0

Изучите этот учебник, это может вам помочь - http://www.w3schools.com/howto/howto_html_include .asp – yashpandey

+0

@Arkej Спасибо за ссылку. Я проверил его раньше, попробовал там предложения. Не помогло. – Rose

ответ

0

Вы не можете указать HTML страница внутри другой HTML напрямую. Но мы можем добиться этого, используя функцию Jquery Load. Смотрите пример,

<html> 
<head> 
    <script src="/path/to/jquery.js"></script> 
    <script> 
    $(function(){ 
     $("#sidebar").load("sidebar.html"); 
    }); 
    </script> 
    </head> 

    <body> 
    <div id="sidebar"></div> 
    </body> 
</html> 
+0

Я использую Thymeleaf на своей странице. Используя это, вы можете выбрать «Uncaught SyntaxError: Unexpected identifier» для строки в файле dashboard.html. – Rose

0

Вы можете сделать это в угловых JS, как показано сохранить боковой панели в файл .html

Предположим, ваша боковая панель dashboard.html

<ul> 
    <li><a> Home</a></li> 
    <li><a> About</a></li> 
    <li><a> Contact</a></li> 
    <li><a> Careers</a></li> 
</ul> 

с помощью угловой директивы ngInclude

<div ng-include="'dashboard.html'"></div> 
+0

Пробовал это. Боковая панель не появилась. Но и ошибок не было. Что может быть проблемой? – Rose

+0

вам нужно включить angularjs в индекс, html – Surendra

+0

вы можете проверить эту ссылку http://www.w3schools.com/angular/tryit.asp?filename=try_ng_include – Surendra

0

Существует несколько способов сделать это. Я рекомендую использовать JQuery:

Предположим, у вас есть html-код вашей боковой панели в файле sidebar.html.

Тогда в любой из HTML файлов, которые вы хотите включить, вы должны создать DIV для содержания его и загрузить содержимое sidbar.html в нем:

<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- ...or whereever you have jquery stored --> 
    <script> 
    $(function(){ 
     $("#sidebar").load("sidebar.html"); 
    }); 
    </script> 
    </head> 

    <body> 
    <!-- other content here --> 
    <div id="sidebar"></div> 
    <!-- other content here --> 
    </body> 
</html> 
+0

Это предложение такое же, как у Vinod's. Пожалуйста, проверьте мой комментарий. – Rose

+0

Проблема с синтаксической ошибкой с Thymeleaf не связана с техникой html include. Внимательно проверьте ваш код. Или поделитесь им с нами, чтобы мы могли взглянуть. – MarcM

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