Для отображения содержимого других HTML-страниц на одной, не совершая перехода между страницами, можно использовать несколько методов. Наиболее распространёнными подходами являются использование AJAX (Asynchronous JavaScript and XML) и фреймы (iframe). Рассмотрим оба подхода.
### 1. Использование AJAX
AJAX позволяет загружать данные с сервера асинхронно, без полной перезагрузки страницы. Вот пример, как это можно реализовать с помощью jQuery:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>AJAX пример</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="content">Содержимое будет загружено сюда</div>
<a href="#" class="load-link" data-url="страница1.html">Загрузить страницу 1</a>
<a href="#" class="load-link" data-url="страница2.html">Загрузить страницу 2</a>
<script>
$(document).on('click', '.load-link', function(e) {
e.preventDefault(); // предотвращаем переход по ссылке
var url = $(this).data('url'); // получаем URL из атрибута data-url
$('#content').load(url); // загружаем содержимое страницы по URL
});
</script>
</body>
</html>
```
В этом примере, при нажатии на ссылку, происходит AJAX-запрос, и содержимое загружается в `div` с id `content`.
### 2. Использование iframe
Другой метод — использовать iframe. Это менее гибкий подход, так как он загружает полную страницу внутри другого документа, но это простой способ вставить другую страницу.
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>iframe пример</title>
</head>
<body>
<iframe id="myFrame" src="страница1.html" width="600" height="400"></iframe>
<a href="#" onclick="changePage('страница1.html')">Загрузить страницу 1</a>
<a href="#" onclick="changePage('страница2.html')">Загрузить страницу 2</a>
<script>
function changePage(url) {
document.getElementById('myFrame').src = url; // изменяем src iframe
}
</script>
</body>
</html>
```
В этом примере клик по ссылке изменит содержимое iframe.
### Заключение
Оба метода имеют свои преимущества и недостатки:
- **AJAX** предоставляет более гибкий и современный способ загрузки данных, позволяет работать с частями страниц и обладает большим контролем над содержимым и стилями.
- **iframe** проще в реализации, но может привести к проблемам с производительностью и сопоставлением стилей.
Выбор способа зависти от ваших требований и контекста использования.