#javascript #jquery #html
#javascript #jquery #HTML
Вопрос:
Я разрабатываю веб-приложение, в котором верхние и нижние колонтитулы для всех страниц одинаковы. Чего я хочу добиться, так это изменить только часть страницы между верхним и нижним колонтитулами при нажатии кнопки в верхнем колонтитуле. Например, есть 3 кнопки Home, Activities и Areas. Если я нажимаю действия, то верхний и нижний колонтитулы страницы должны оставаться неизменными, а страница действий должна располагаться между верхним и нижним колонтитулами. Как я могу это сделать?
Ответ №1:
Я согласен с rlemon. Я думаю, что jQuery / AJAX — это то, что вы ищете. Например:
<html>
<head>
<!-- Include Jquery here in a script tag -->
<script type="text/javascript">
$(document).ready(function(){
$("#activities").click(function(){
$("#body").load("activities.html");
});
});
</script>
</head>
<body>
<div id="header">
<a href="#" id="activities">Activities</a>
<!-- this stays the same -->
</div>
<div id="body">
<!-- All content will be loaded here dynamically -->
</div>
<div id="footer">
<!-- this stays the same -->
</div>
</body>
</html>
В этой простой реализации я только что создал 2 простые HTML-страницы, index.html будет использоваться в качестве шаблона. И activities.html которая содержит контент, который я хочу загружать динамически.
Следовательно, если я нажимаю Activities, он должен загрузиться activities.html в без перезагрузки всей страницы.
Вы можете загрузить библиотеку jquery с jquery.org
Я не тестировал это, но это должно сработать.
Надеюсь, это поможет 🙂
Комментарии:
1. просто хочу спросить 1 вещь, что все страницы будут иметь разную высоту. как мне настроить высоту и ширину тела div. высота: 100% и ширина: 100%, это нормально?
2. это не обязательно, высота обычно автоматически подстраивается под содержимое
3. В HTML идентификатор href равен «#activities», но должен быть «activities».
4. @Sthe В запросе OP у него есть 3 веб-страницы, которые он хочет загрузить, но просто скажите, что у вас есть 10 …is есть какой-нибудь способ объединить разные страницы в один скрипт? или вам просто нужно выписать скрипт более 10 раз? Что-то вроде «если щелкнуть по этому, то по этому, еще если щелкнуть по этому, то по этому, еще …»
5. Вам нужно было бы сделать это более динамичным. Вы могли бы присвоить своим ссылкам то же имя класса, например,
links. Вместо того, чтобы делать$("#activities").click(function()..., вы делаете$(".links").click(function(). Для каждой ссылки у вас может быть атрибут, соответствующий названию страницы, которую вы хотите загрузить. Вот так<a href="#" class="links" page="mypage">...</a>. Чтобы загрузить их, вы можете сделать:$("#body").load($(this).attr("page") ".html"). Теперь у вас может быть более 10 страниц, использующих ту же логику.
Ответ №2:
Когда страница доставлена — Верхний основной нижний колонтитулы объединяются. Вы можете рассматривать это как одну страницу. Итак, если вы в своем заголовке назвали элемент в вашем теле, скажите «Контейнер», то, включив его в раздел тела, вы сможете его изменить.
Ответ №3:
Вы используете PHP или серверные страницы? Вы могли бы просто включать верхние и нижние колонтитулы. Jquery действительно сложен для простого включения верхних и нижних колонтитулов на вашей странице.
Комментарии:
1. Используете ли вы PHP, JSP или ASP?
2. Затем вы включили бы верхние колонтитулы, вставив в свой код следующее. <%@ include file=»filename» %> Именем файла будет местоположение файла, такого как header.jsp или footer.jsp
3. Кроме того, убедитесь, что если у вас есть какие-либо ссылки, изображения или видео в файле верхнего или нижнего колонтитулов, сделайте их АБСОЛЮТНЫМИ ссылками, чтобы они работали независимо от того, на какую страницу вы включаете файл.
Ответ №4:
Вы ищете AJAX (сокращение от асинхронного JavaScript и XML)
в jQuery вы можете использовать $.ajax
вот пример / руководство о том, как это сделать с помощью php.
Ответ №5:
Вам нужно отправить AJAX-запрос на сервер. Сервер ответил бы HTML, чтобы «вставить» между верхним и нижним колонтитулами. И хендлер обратного вызова AJAX заменил бы текущее содержимое на новое.
Все это делается за вас с помощью load функции быстрого доступа из jQuery. Смотрите http://api.jquery.com/load
Ответ №6:
создайте div, содержащий содержимое, и присвоите ему уникальный класс или идентификатор. Затем в вашем коде jquery привяжите событие click к элементам, которые вы хотите использовать в качестве навигации, и в этой привязке используйте $ («#div»).load(«page.php «) или что-то подобное, чтобы загрузить содержимое из другого файла в div
Ответ №7:
В качестве альтернативы это можно сделать с помощью iframes. Родительская страница (с верхним и нижним колонтитулами) может управлять iframe и заставлять его перемещаться.
Компромиссы:
- Это может быть немного медленнее (загрузка полной страницы)
- это может быть проще в зависимости от вашего случая