Динамическая подмена контента без перезагрузки страницы!

@Kazax_Misha · Регистрация: 15.04.2013

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

При создании очередной страницы наткнулся на одну проблему.
Проблема вот в чем:
При клике по разделу меню (css) он выводит меня на список товаров.

Нужно же сделать - чтобы по клику на определенный вид товара появлялось описание этого товара (заменяя передыдущий список) - т.е. без перезагрузки.
=======

Здесь многие советуют Ajax, но я с ним еще не работал. Есть какие-то методы решения данной проблемы?
Заранее спасибо за ответ.

@zme9 · 28.03.2014, 00:36

Аякс

@Kazax_Misha · 28.03.2014, 00:50 **[ТС]**

О,блин, спасибо большое за ответ.
Долго искал подобное, но такого детального описания решения я еще не встречал. Огромное спасибо за объяснение, буду рекомендовать вас на лауреаты Ноб премии.

Вопрос решен!

@dolte · 28.03.2014, 12:13

Не по теме:

это был саркам ? :)

@Kazax_Misha · 28.03.2014, 16:19 **[ТС]**

Не по теме:

Угу) Ну если никто не может подтолкнуть в нормальном направлении -_- . Это печально, товарищи

@monochromer · 28.03.2014, 16:34

Описание товара можно разместить в скрытой области. При клике разместить (скопировать из скрытой области) контент с помощью JavaScript (опционально jQuery) в нужной области.

@Rucklless · 28.03.2014, 16:43

если делать скрытыми полями, то без JS это реализовывается:
в обычном состоянии .discription {"display: none;"},
меню делать чекбоксами
checkbox:checked + .discription {display:block;}
подробнее можно разобрать на запчасти этот слайдер http://imperacms.ru/examples/css-slider/index.html

@monochromer · 28.03.2014, 17:12

Подобный подход только демонстрирует знания верстальщика.
При этом обладает рядом недостатков:
1. Расположение ссылки и контента зависимы. В некоторых случаях положение может спасти checkbox:checked ~ .discription .
2. Не семантично (но это уже другая история).
3. Количество CSS-кода растет пропорционально количеству элементов, для которых нужно реализовать подобный эффект. Хотя в некоторых случаях грамотное расположение элементов, реализация классов и грамотная работа с селекторами очень помогает.

С помощью скриптов ворочать можно почти как захотим.

@dolte · 28.03.2014, 17:44

Kazax_Misha, а вообще, товарищ zme9 всё верно сказал, вам нужно копать в сторону Ajax, а так как ваша тема в разделе хтмл/цсс, то вам сюда https://www.cyberforum.ru/javascript/

@Kazax_Misha · 29.03.2014, 23:10 **[ТС]**

Всем спасибо за ответы!

Пока пробую себя верстальщиком, надеюсь у меня это будет получаться!

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114

@Kazax_Misha 4 / 4 / 3 Регистрация: 15.04.2013 Сообщений: 235

	Динамическая подмена контента без перезагрузки страницы! 27.03.2014, 23:46. Показов 2466. Ответов 9 Метки нет (Все метки) При создании очередной страницы наткнулся на одну проблему. Проблема вот в чем: При клике по разделу меню (css) он выводит меня на список товаров. Нужно же сделать - чтобы по клику на определенный вид товара появлялось описание этого товара (заменяя передыдущий список) - т.е. без перезагрузки. ======= Здесь многие советуют Ajax, но я с ним еще не работал. Есть какие-то методы решения данной проблемы? Заранее спасибо за ответ. 0

@zme9 94 / 67 / 23 Регистрация: 22.09.2013 Сообщений: 626
	28.03.2014, 00:36
	Аякс 1

@Kazax_Misha 4 / 4 / 3 Регистрация: 15.04.2013 Сообщений: 235
	28.03.2014, 00:50 [ТС]
	О,блин, спасибо большое за ответ. Долго искал подобное, но такого детального описания решения я еще не встречал. Огромное спасибо за объяснение, буду рекомендовать вас на лауреаты Ноб премии. Вопрос решен! 0

@dolte
	28.03.2014, 12:13
	Не по теме: это был саркам ? :) 0

@Kazax_Misha
	28.03.2014, 16:19 [ТС]
	Не по теме: Угу) Ну если никто не может подтолкнуть в нормальном направлении -_- . Это печально, товарищи 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	28.03.2014, 16:34
	Описание товара можно разместить в скрытой области. При клике разместить (скопировать из скрытой области) контент с помощью JavaScript (опционально jQuery) в нужной области. 1

@Rucklless 5 / 5 / 2 Регистрация: 25.03.2014 Сообщений: 13
	28.03.2014, 16:43
	если делать скрытыми полями, то без JS это реализовывается: в обычном состоянии .discription {"display: none;"}, меню делать чекбоксами checkbox:checked + .discription {display:block;} подробнее можно разобрать на запчасти этот слайдер http://imperacms.ru/examples/css-slider/index.html 1

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	28.03.2014, 17:12
	Подобный подход только демонстрирует знания верстальщика. При этом обладает рядом недостатков: 1. Расположение ссылки и контента зависимы. В некоторых случаях положение может спасти checkbox:checked ~ .discription . 2. Не семантично (но это уже другая история). 3. Количество CSS-кода растет пропорционально количеству элементов, для которых нужно реализовать подобный эффект. Хотя в некоторых случаях грамотное расположение элементов, реализация классов и грамотная работа с селекторами очень помогает. С помощью скриптов ворочать можно почти как захотим. 1

@dolte Человек 331 / 205 / 63 Регистрация: 04.02.2013 Сообщений: 1,223
	28.03.2014, 17:44
	Kazax_Misha, а вообще, товарищ zme9 всё верно сказал, вам нужно копать в сторону Ajax, а так как ваша тема в разделе хтмл/цсс, то вам сюда https://www.cyberforum.ru/javascript/ 1

@Kazax_Misha 4 / 4 / 3 Регистрация: 15.04.2013 Сообщений: 235
	29.03.2014, 23:10 [ТС]
	Всем спасибо за ответы! Пока пробую себя верстальщиком, надеюсь у меня это будет получаться! 0