Подтвердить что ты не робот

Как я могу сделать свою навигационную панель такой же в моем html?

С каждой новой страницы я должен обновить панель навигации. Это означает, что я перехожу от копирования страницы к странице и вставки моей панели навигации. Чем больше страниц я добавляю, тем сложнее. Теперь у меня встроенные навигационные панели. Так что я ищу способ сделать html файл, который содержит только панель навигации, а затем встроить его в мой код, как я бы сделал с CSS и JavaScript. Таким образом, если я отредактирую один файл, все остальные страницы будут обновлены. Если я использую тег iframe, у меня будет много проблем, но я не знаю ни одного другого тега, который мог бы делать то, что мне нужно. И что же мне делать? Я провел некоторое исследование, но все, что я могу найти, это тег iframe. Что мне делать?

4b9b3361

ОТВЕТЫ

Ответ 1

Я понял это сам, вы можете использовать файл JavaScript и использовать document.write, а затем поместить его туда, куда хотите:

<script type="text/javascript" src="/js/sidebar.js"/>

Вот мой js файл:

document.write("<div id='sidebartop'>");
document.write("<p>Navigation</p>");
document.write("</div>");

Если вы хотите использовать как двойные кавычки, так и одинарные кавычки внутри строки, будьте осторожны с этим, и я думаю, что < и > знаки должны быть в двойных кавычках. Здесь мой полный код:

     ----/js/sidebar.js----
document.write("<div id='sidebartop'>");
document.write("<p>Navigation</p>");
document.write("</div>");
document.write("<div id='sidebar'>");
if (page==1) { var p=" style='text-decoration: underline;'" } else { var p=" style='text-decoration: normal;'" }
if (page==2) { var pp=" style='text-decoration: underline;'" } else { var pp=" style='text-decoration: normal;'" }
if (page==3) { var ppp=" style='text-decoration: underline;'" } else { var ppp=" style='text-decoration: normal;'" }
if (page==4) { var pppp=" style='text-decoration: underline;'" } else { var pppp=" style='text-decoration: normal;'" }
if (page==5) { var ppppp=" style='text-decoration: underline;'" } else { var ppppp=" style='text-decoration: normal;'" }
document.write("<p><"+'a href="http://brandonc.handcraft.com/"'+p+">Home</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/about"'+pp+">About The Author</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/sevenmages"'+ppp+">The Seven Mages</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/comment"'+pppp+">Leave A Comment</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/calender"'+ppppp+">Calender</a></p>");
document.write("</div>");

     ----In place where you want code to go----
<script>var page=5</script>
<script type="text/javascript" src="/js/sidebar.js"/>

Вероятно, не самый эффективный, и я вызывающе рекомендую использовать PHP, как в других ответах, но это работает для меня и не нуждается в .php после каждого URL-адреса.

Ответ 2

Если ваша страница строго HTML + JavaScript, вы можете использовать свойство HTML DOM innerHTML. Вот пример:

index.html

 <body>
  <nav id="navMenu"></nav>
  <div> rest of web page body here </div>
  <script src="script.js"></script>
 </body>

about.html

 <body>
  <nav id="navMenu"></nav>
  <div> rest of web page body here </div>
  <script src="script.js"></script>
 </body>

script.js

 document.getElementById("navMenu").innerHTML =
 '<ul>'+
  '<li><a href="index.html">Home</a></li>'+
  '<li><a href="services.html">Services</a></li>'+
  '<li><a href="about.html">About</a></li>'+
 '</ul>';

Важная строка здесь - это тег nav, и все, что вам нужно сделать, это добавить эту строку на другие страницы в этом примере about.html.

Я также рекомендую PHP или подобное выполнить то, что вам нужно!

Ответ 3

Я бы сильно рекомендую использовать PHP:

<?php include "header.html"; ?>

Однако, если это не вариант, вы можете использовать Server Side Includes:

Файл в том же каталоге:

<!--#include file="header.html"-->

Файл в другом каталоге:

<!--#include virtual="/header.html"-->

Для этого вам понадобится сервер Linux/Apache (а не Windows). Вам также потребуется использовать расширение .shtml.

В качестве альтернативы, учитывая, что вы хотите сохранить расширения .html, вы можете заставить Apache "думать", что все файлы .html на самом деле .php:

Создайте файл .htaccess в корневом каталоге вашего сайта и добавьте следующую строку:

AddType application/x-httpd-php .html .htm

Если вы используете PHP как CGI (возможно, не так), вы должны написать вместо этого:

AddHandler application/x-httpd-php .html .htm

(Получено из этого ответа)

Ответ 4

Если ваша страница строго HTML, вам просто нужно будет скопировать и вставить. Было бы намного лучше, если бы вы использовали PHP, тогда вы можете просто включить или требовать, но по мере того, как ситуация сейчас, все, что вам нужно, это сделать чистое кодирование HTML для вашей навигации. Отступывайте свои коды хорошо, тогда вам будет проще копировать и печатать на всех страницах.

Если вы можете использовать простые коды PHP, прочитайте это: http://www.w3schools.com/php/php_includes.asp

Ответ 5

Если вы хотите использовать PHP для достижения, вы можете сделать что-то похожее на код ниже. У вас будут файлы с двумя "шаблонами", а затем сколько угодно "контентных" файлов.

  • header.php будет включать содержимое заголовка (логотип, меню навигации и т.д.)
  • footer.php будет включать контент на нижнем колонтитуле (нижняя навигация, авторское право, отказ от ответственности и т.д.).
  • content.php будет включать фактический контент, который вы хотите отобразить. У вас может быть бесконечное количество "контентных" страниц.

Обратите внимание, что хотя эти файлы имеют расширения .php, код HTML по-прежнему работает отлично. Таким образом, вы можете сделать что-то подобное для каждого content.php:

content.php

<?php include "header.php"; ?>

<div class="content">
Your page content will go here
</div>

<?php include "footer.php"; ?>

header.php

<html>
<body>
<div class="header">
Header content such as nav bar here
</div>

footer.php

<div class="footer">
Footer content such as copyright here
</div>
</body>
</html>

Таким образом вы можете изменить содержимое header.php и footer.php только один раз, и изменения будут отражены на всех страницах, на которые вы включили файлы.

Если у вас есть дополнительные вопросы или вы хотите что-то объяснить, не стесняйтесь оставлять комментарии.

Ответ 6

На самом деле, если вы делаете только внешний интерфейс, как я, использование load() с jQuery более чем достаточно. Точно так же, как сказал Скийтти и Фкиршбаум.

Но я хотел бы добавить несколько моментов,
1. на основе комментария @Skitty, важно загрузить ваш navbar.html на стороне сервера, например, просто разместить его на своем веб-сайте github.io и ссылаться на него по его URL-адресу, например

 $(document).ready(function() {
   $('#nav-container').load('https://berlinali.github.io/test%20header%20template/header.html #nav');}

2. если у вас есть файл css, просто поместите его внутри <style> </style> в <header> часть вашего html файла.

Я нажимаю свой код на github, если вам нужна ссылка. Надеюсь, поможет! https://github.com/BerlinaLI/berlinali.github.io/tree/master/test%20header%20template

Ответ 7

Вы можете использовать серверные скриптовые языки, такие как php или ruby. Или вы можете создать какой-нибудь файл menu.json и создать меню из javascript.

  • С серверами вы должны настроить сервер, или вы можете использовать XAMPP для быстрой настройки.

  • Создайте header.html со всеми вашими ссылками меню

  • Вставить файл меню с помощью строки <?php include 'header.html'; ?> (все файлы, в которых вы его используете, должны быть с расширением .php или вы можете редактировать файл конфигурации php для расширения .html)

Ответ 8

PHP, вероятно, был бы лучшим методом в этом случае, но поскольку похоже, что у вас уже есть все, что было настроено в чистом HTML и JavaScript, вы можете рассмотреть возможность использования jQuery для загрузки внешнего файла в DOM.

jquery.load('header.html')

Это, конечно, имеет свои собственные проблемы, но вы можете эффективно контролировать все, начиная с простой .js-структуры без необходимости использования php и не требующего iFrame.

Вы по-прежнему потенциально хотите решить проблему резервного копирования для браузеров без включения JavaScript, поэтому я предлагаю это, не зная всех деталей, и я бы все же предположил, что php все равно будет лучшим решением, поскольку вы разрешаете сервер для тяжелого подъема.

Ответ 9

Просто используйте jQuery.load(). Он очень прост в использовании. Вот пример

navbar.html

<div>This is the navigation bar</div>

index.html

<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
</head>
<body>

<!--HEADER-->
<div id="nav-container"></div>
<!--HEADER-->

<p>This is the homepage.</p>
<script type="text/javascript">
$(document).ready(function() {
$('#nav-container').load('header.html');
});
</script>
</body>
</html>

about.html

<!DOCTYPE html>
<html>
<head>
<title>About Page</title>
</head>
<body>

<!--HEADER-->
<div id="nav-container"></div>
<!--HEADER-->

<p>This is the about page.</p>
<script type="text/javascript">
$(document).ready(function() {
$('#nav-container').load('header.html');
});
</script>
</body>
</html>