Изменение контента без смены страницы

@Alex-Kir · Регистрация: 04.05.2014

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Возникла такая проблема: нужно при нажатии на ссылку изменить контент на странице.
То есть вот есть сайт с меню: "Главная" "О нас" "Услуги" и тд. И надо, чтобы при нажатии на пункт "О нас" допустим, менялось только содержимое центральной части страницы. Например: вместо прайс-листа выводилась контактная инфа.

Наверное такой вопрос уже задавался, но пол дня лазил в интернете и не нашел четкого ответа... А сам в этом полный ноль - знаю только HTML и CSS хорошо, а Java и прочее вообще не рублю(

Заранее спасибо за помощь!

@Lazy_Den · 04.05.2014, 13:22

Сообщение от Alex-Kir

а Java и прочее вообще не рублю

Заметно. Только новички могут Java и JavaScript под одно понятие подкладывать

Попробуйте поискать информацию по Ajax. Это то, что вам нужно. Почитайте, присмотритесь, а если что-то будет не очень получаться, постараемся помочь.

@Alex-Kir · 04.05.2014, 15:07 **[ТС]**

Спасибо, сегодня же почитаю

Если будут вопросы отпишусь сюда

Добавлено через 1 час 10 минут
Ну вот я нашел как реализовать подгрузку контента в div:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">  
<script type="text/javascript" src="jquery.js"></script>  
</head>  
  
<body>  
      
    <p>Какую страницу желаете открыть?</p>  
    <form>  
        <input id="btn1" type="button" value="Страница 1">   
        <input id="btn2" type="button" value="Страница 2">  
    </form>  
    <div id="content"></div>  
      
    <script>  
        $(document).ready(function(){  
          
            $('#btn1').click(function(){  
                $.ajax({  
                    url: "page1.html",  
                    cache: false,  
                    success: function(html){  
                        $("#content").html(html);  
                    }  
                });  
            });  
              
            $('#btn2').click(function(){  
                $.ajax({  
                    url: "page2.html",  
                    cache: false,  
                    success: function(html){  
                        $("#content").html(html);  
                    }  
                });  
            });  
              
        });  
    </script>  
      
</body>  
</html>

Один вопрос: тут инфа будет загружаться в уже пустой контейнер, а у меня то он с содержанием изначально. Или при загрузке новой инфы старое содержание блока стирается?
P.S. И как бы это сделать с помощью ссылок,а не кнопок...

Добавлено через 6 минут
Вот еще код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
$.ajax({  
               url: "upgrade.php",  
               cache: false,  
               success: function(html){  
                   
                   $('#block').fadeTo(200,0.1,function()  //эфект плавного появления содержимого файла upgrade.php в блоке #block
                        { 
                          $(this).html(html).fadeTo(900,1);
                       });
               }  
           });

Но как быть с изначальным содержанием div?

@Lazy_Den · 04.05.2014, 15:31

Сообщение от Alex-Kir

Но как быть с изначальным содержанием div?

Тут есть разные методы для добавления контента. Вот пара из них:
1. html() - заменяет старый контент новым, содержащий html-разметку
2. append() - добавляет новый контент в конец блока к уже существующему содержимому
3. prepend() -то же, что и п.2, только добавляет в начало
и много других методов, о которых можно узнать на официальном сайте или на этом сайте, где многое переведено на русский.

Сообщение от Alex-Kir

И как бы это сделать с помощью ссылок,а не кнопок

Тут не плохо было бы узнать о селекторах jQuery, но т.к. вы знакомы с CSS, то сложностей у вас возникнуть не должно.

@Alex-Kir · 04.05.2014, 15:52 **[ТС]**

Про селекторы прочитал. Допустим, я изменил код на такой (ссылки вместо кнопок) - он же работать будет? То есть просто по id ссылаться?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<body>  
      
    <p>Какую страницу желаете открыть?</p>  
    <a href="#" id="btn1">Первая страница</a>
    <a href="#" id="btn2">Вторая страница</a>
    <div id="content"></div>  
      
    <script>  
        $(document).ready(function(){  
          
            $('#btn1').click(function(){  
                $.ajax({  
                    url: "page1.html",  
                    cache: false,  
                    success: function(html){  
                        $("#content").html(html);  
                    }  
                });  
            });  
              
            $('#btn2').click(function(){  
                $.ajax({  
                    url: "page2.html",  
                    cache: false,  
                    success: function(html){  
                        $("#content").html(html);  
                    }  
                });  
            });  
              
        });  
    </script>  
      
</body>  
</html>

И еще. Вот в этом коде есть такое:

HTML5
1
$("#content").html(html);

Я понял, что это заменяет старое содержание блока. Но что значит ".html(html)" выражение в скобках?

P.S. Могли бы Вы еще посмотреть, коды, которые я скинул в предыдущем сообщении, у Вас претензий не вызывают? Ну там, может Вы что-нибудь изменили и т.д.

Извиняюсь за море вопросов

В инете много полезной инфы, но иногда не до конца все объясняется

@Lazy_Den · 04.05.2014, 16:16

Сообщение от Alex-Kir

Извиняюсь за море вопросов

Это нормально. Но если бы я сейчас вам набросал какой-нибудь пример, не дав немного вникнуть в суть вопроса, то вопросов было бы гораздо больше.

Сообщение от Alex-Kir

Я понял, что это заменяет старое содержание блока. Но что значит ".html(html)" выражение в скобках?

Да, изменяет старое содержимое на новое. Разберем немного эту часть кода:

JavaScript
1
2
3
success: function(html){
    $("#content").html(html);  
}

Описать словами её можно так: "В случае успешного завершения запроса, выполнить функцию, которая принимая содержимое ответа, помещает его в переменную (в данном случае html). Внутри этой функции, контент, содержащийся в переменной html, вставляется в блок, у которого id=content". Вы можете изменять имя переменной по своему усмотрению, например, следующая запись выполнит аналогичные действия:

JavaScript
1
2
3
success: function(myData){
    $("#content").html(myData);  
}

Сообщение от Alex-Kir

у Вас претензий не вызывают?

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

@Alex-Kir · 04.05.2014, 16:21 **[ТС]**

Огромное спасибо! В скором времени протестирую на сайте, посмотрю что к чему

@Serg-24 · 10.05.2016, 18:19

Если тема не закрыта - прошу по теме подсказать.
При клике - страница обновляется - это плохо, т.к, если открытое меню - то оно при переходе свернется.
Как сделать так, что бы меню оставалось открытым (на основной странице входа а контент, <title>, name="description" и meta name="keywords" заменялись?
Может есть какие примеры таких сайтов?

@sad67man · 10.05.2016, 20:46

Serg-24,

JavaScript
1
2
3
$("a").click(function(e){
    e.preventDefault();
})

e.preventDefault() — не даст сработать событию по-умолчанию. Например, если это применить к ссылке, то переход по ссылке не будет работать.

@Serg-24 · 11.05.2016, 06:22

sad67man,
e.preventDefault() — не даст сработать событию по-умолчанию. Например, если это применить к ссылке, то переход по ссылке не будет работать.

- Этой переменной Вы как советуете поменять код или какую его часть нужно использовать?
Поясните пожалуйста.
Как тогда будет выглядеть полный код на основной странице и подгружаемой при активации нажатия на ссылку?

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@Alex-Kir 0 / 0 / 0 Регистрация: 04.05.2014 Сообщений: 64

	Изменение контента без смены страницы 04.05.2014, 13:07. Показов 31896. Ответов 9 Метки нет (Все метки) Здравствуйте! Возникла такая проблема: нужно при нажатии на ссылку изменить контент на странице. То есть вот есть сайт с меню: "Главная" "О нас" "Услуги" и тд. И надо, чтобы при нажатии на пункт "О нас" допустим, менялось только содержимое центральной части страницы. Например: вместо прайс-листа выводилась контактная инфа. Наверное такой вопрос уже задавался, но пол дня лазил в интернете и не нашел четкого ответа... А сам в этом полный ноль - знаю только HTML и CSS хорошо, а Java и прочее вообще не рублю( Заранее спасибо за помощь! 0

@Alex-Kir 0 / 0 / 0 Регистрация: 04.05.2014 Сообщений: 64
	04.05.2014, 16:21 [ТС]
	Огромное спасибо! В скором времени протестирую на сайте, посмотрю что к чему 0

@Serg-24 0 / 0 / 0 Регистрация: 10.05.2016 Сообщений: 3
	10.05.2016, 18:19
	Если тема не закрыта - прошу по теме подсказать. При клике - страница обновляется - это плохо, т.к, если открытое меню - то оно при переходе свернется. Как сделать так, что бы меню оставалось открытым (на основной странице входа а контент, <title>, name="description" и meta name="keywords" заменялись? Может есть какие примеры таких сайтов? 0

@Serg-24 0 / 0 / 0 Регистрация: 10.05.2016 Сообщений: 3
	11.05.2016, 06:22
	sad67man, e.preventDefault() — не даст сработать событию по-умолчанию. Например, если это применить к ссылке, то переход по ссылке не будет работать. - Этой переменной Вы как советуете поменять код или какую его часть нужно использовать? Поясните пожалуйста. Как тогда будет выглядеть полный код на основной странице и подгружаемой при активации нажатия на ссылку? 0