HTML включает элементы навигации с относительными ссылками

#javascript #html

#javascript #HTML

Вопрос:

Я включил элемент навигации на несколько страниц, подобных этому: <script> $(function(){ $("#includedNavigation").load("navigation.html"); }); </script>

Но это работает только для html-файлов в том же каталоге «subdir». The navigation.html не может быть достигнуто с index.html в верхнем главном каталоге «dir». Если я добавлю верхний шаблон к index.html в каталоге выше, navigation.html достигается правильно, но относительные ссылки больше не работают. Я не хочу заменять относительные ссылки абсолютными путями. Возможно ли переключаться между различными ссылками в navigation.html в зависимости от того, откуда это вызывается? Есть еще идеи? Большое спасибо!

Черновик

Комментарии:

1. Все страницы, использующие navigation.html для работы относительных путей их каталог должен быть структурирован таким же образом. Если только одна страница использует navigation.html просто измените все относительные ссылки внутри него, чтобы они были относительными к index.html структура каталогов вместо navigation.html структура каталогов. Есть какой-нибудь пример ссылки из navigation.html а деревья каталогов, которые мы можем видеть?

2. @Shilly . Спасибо. Я добавил эскиз, чтобы прояснить конструкцию.

3. Все страницы должны иметь одинаковое меню. Таким образом, все они содержат: ` <script> $(function(){ $(«#includedNavigation»).load(«navigation.html «); }); </script> ` и <div id="includedNavigation"></div> .

4. Простое решение состоит в том, чтобы убедиться, что чем index.html и все страницы находятся в одном каталоге, поэтому все они могут использоваться «. /pageX.html «. Поскольку это многостраничный веб-сайт, который повторно использует одно и то же меню на всех своих страницах, нет функциональной или логической разницы между страницой 1 и индексом, за исключением того, что индекс, вероятно, является первой страницей, которую вы видите. Итак, я бы просто поставил index.html в той же папке и на сегодня хватит. Было бы разумно разместить его на верхнем уровне, если индексная страница загружала бы в себя все остальные страницы. Тогда меню нужно было бы включать только на индексную страницу.

5. Что ж, это звучит довольно практично. Но группировка по папкам помогает дать четкий обзор, например, для отдельных страниц с помощью темы.

Ответ №1:

Поскольку это многостраничный веб-сайт, который повторно использует одно и то же меню на всех своих страницах, между page1.html и index.html нет функциональной или логической разницы, за исключением того, что индекс, вероятно, является первой страницей, которую вы видите. Итак, я бы просто поставил index.html в той же папке и на сегодня хватит. Было бы разумно разместить его на верхнем уровне, если индексная страница загружала бы в себя все остальные страницы. Тогда меню нужно было бы включать только на индексную страницу.

Структура папок — это требование проекта, а не техническое требование. В процессе разработки все страницы аналогичным образом разделяются на подкаталоги и тому подобное для упорядочивания файлов. Но при запуске сценария развертывания для копирования всего в рабочую среду сценарий развертывания в любом случае объединяет все в один файл, и вся структура папок исчезает.

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

Ответ №2:

вы должны указать путь к navigation.html файл.

$(функция(){ $(«#includedNavigation»).load(«./dir/navigation.html «); });

вот так

Комментарии:

1. @gaurav_krishna: нет проблем с включением navigation.html во вложенном каталоге. Но с точки зрения index.html этого нет ./page1.html , как это есть для page2.html , например.

Ответ №3:

Можете ли вы использовать что-то вроде этого

 <link rel="import" href="navigation.html">
  

Или

 $(function(){ $("#includedNavigation").load("path/to/navigation.html"); });
  

Комментарии:

1. @Staphan_Golubev : Спасибо за ваш ответ. Я попробовал второй вариант. Я могу включить navigation.html из любого каталога, но относительные ссылки внутри navigation.html больше не работают, потому что путь указан относительно вызывающего файла, а не фиксирован для navigation.html .