Открыть страничку в блоке div(css)

@Cdelphi78 · Регистрация: 21.02.2014

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

Добрый день! Не знаю в эту ли тему пишу! Имеется html css страничка и нужно другую страничку открывать в блоке div размера.

@Armi · 23.05.2015, 23:13

Вам нужен ajax лучше всего с библиотекой jquery.

@Cdelphi78 · 24.05.2015, 15:59 **[ТС]**

А подробней, можно пожалуйста,я новичек в скриптах.

@Armi · 24.05.2015, 16:21

Подключаете библиотеку jquery

HTML5

<script type="text/javascript" src="путь_к_скачанному_файлу/jquery.js">
</script> //если файл на вашем пк
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
//если удаленно

Думаю тут все понятно для начала?

Добавлено через 18 секунд
html надеюсь знаете
Это дальше за подключенной библиотекой.
Добавлено через 4 минуты

Javascript

<script type="text/javascript">
$(document).ready(function(){     //функция готовности дерева
    $('a').on("click", function(){ // обработчик нажатия на ссылку
    var path=$(this).attr("href");
    $("id или класс вашего div").load(path);
return false;
    });
 
});</script>

@Cdelphi78 · 24.05.2015, 17:26 **[ТС]**

Не работает

HTML5

html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="main.css" />
<title>Сайт о Компьютерах</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){     //функция готовности дерева
    $('a').on("click", function(){ // обработчик нажатия на ссылку
    var path=$(this).attr("href");
    $("main").load(path);
return false;
    });
 
});</script>
</head>
<body link="00FF00">
<div id=page>
<div class="top">
<h1> <p> <a href="https://www.cyberforum.ru/../example/knob.html">Все о Компьютерах</a></p> </h1> 
</div>
 
<div class="main">
 
Компью́тер (англ. computer, МФА: [kəmˈpjuː.tə(ɹ)][1] — «вычислитель») — устройство или система, способное выполнять заданную, чётко определённую изменяемую последовательность операций. Это чаще всего операции численных расчётов и манипулирования данными, однако сюда относятся и операции ввода-вывода. Описание последовательности операций называется программой[2].
Электро́нная вычисли́тельная маши́на, ЭВМ — комплекс технических средств, где основные функциональные элементы (логические, запоминающие, индикационные и др.) выполнены на электронных элементах, предназначенных для автоматической обработки информации в процессе решения вычислительных и информационных задач[3][4].
ЭВМ используется как один из способов реализации компьютера. В настоящее время термин ЭВМ, как относящийся больше к вопросам конкретной физической реализации компьютера, почти вытеснен из бытового употребления и в основном используется инженерами цифровой электроники, как правовой термин в юридических документах, а также в историческом смысле — для обозначения компьютерной техники 1940—1980-х годов и больших вычислительных устройств, в отличие от персональных.
</div>
 
<div class= "link">
       <div id="menu">
                <ul>
                <li><a href="history.htm">История создания</a></li>
                <li><a href="#">Классификация</a></li>
                <li><a href="#">Устройство</a></li>
                <li><a href="#">Применение</a></li>
                <li><a href="#">Топовые конфигурации</a></li>
               </ul>
        </div>
        </div>
        
<div class= "layer">
        
 
  
 
 
</div>
</div>
</body>
</html>

@rysalka · 24.05.2015, 17:37

я вижу ошибку:
$("main").load(path);
замени на
$(".main").load(path);

@Armi · 24.05.2015, 19:59

Опечатка.

@Mikhail Shell · 24.05.2015, 20:21

Cdelphi78, как я понял тут нужен не div, а iframe чтобы открывать страницу в блоке. А чтобы страницы менялись при кликах по ссылкам нужно как атрибут к ссылкам написать:

HTML5

1	<a href="#" onClick="document.getElementById('some_iframe').src = 'путь_к_странице.html';" />

И к каждой ссылке разные пути к страницам.
Сейчас объясню как это работает.
Есть iframe с id "some_iframe"

HTML5

1	<iframe></iframe>

Что бы в нем отображалась другая страница нужен атрибут src который включает в свое значение путь к файлу html (или php).

HTML5

1	<iframe src="way_to_file"></iframe>

А как я выше писал код ссылки, понятно что это js (а именно событие) встроенный как атрибут тега, а значение его (атрибута) является js'ом. Это код меняет при нажатии на ссылку src у iframe'а.

@alexsamos33 · 25.05.2015, 10:45

Mikhail Shell, Зачем так? Можно проще:

HTML5

1
2
3

<a href="путь_к_странице.html" target="some_iframe">123</a>
 
<iframe name="some_iframe"></iframe>

@Cdelphi78 · 25.05.2015, 14:46 **[ТС]**

Сообщение от rysalka

я вижу ошибку:
$("main").load(path);
замени на
$(".main").load(path);

Заменил, не работает.

Сообщение от alexsamos33

Mikhail Shell, Зачем так? Можно проще:

Сделал так, работает, но у меня в блоке main находится текст, а фрейм появляется под ним, а мне нужно чтобы фрейм замещал этот текст(вместо текста) при нажатии на ссылку, а и как еще убрать границы у фрейма.

@rysalka · 25.05.2015, 14:58

рабочий код, только возьми html и css Не меняется высота горизонтального меню внизу..

Javascript

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 
<script type="text/javascript">
$(document).ready(function() {
    $('.top').on('click', 'a', function(){
        $(".main").load(this.href);
        return false;
    });
});
</script>

библиотеку тоже замени

@Cdelphi78 · 25.05.2015, 20:55 **[ТС]**

rysalka, Все равно не работает, у меня такое подозрение что может он не подключает библиотечку, всмысле ссылка не рабочая, щас попробую скачать.

Добавлено через 13 минут
Да что такое, равно не работает скачал jcvery 1.2.4 подключил не работает, скачал jquery 1.2.3, думаю в 1.2.4. нет таких функций но она идет в архиве zip, там куча файлов, как ее подключить? какой файл нужен?

@rysalka · 25.05.2015, 22:54

Вам эта не подошла https://ajax.googleapis.com/aj... ery.min.js ?
2.* версию желательно

@Cdelphi78 · 26.05.2015, 00:13 **[ТС]**

дак не подошла- всмысле что не работает! так то все равно какую?

@rysalka · 26.05.2015, 00:18

откройте консоль и посмотрите, если ли ошибки.. (F12)
http://192.162.135.7/soc.html я проверил только что - работает, можете нажать, сами проверить!

@Cdelphi78 · 26.05.2015, 12:43 **[ТС]**

Сообщение от rysalka

откройте консоль и посмотрите, если ли ошибки.. (F12)
http://192.162.135.7/soc.html я проверил только что - работает, можете нажать, сами проверить!

У меня не работает, какую консоль? если f12--> Консоль то там ничего нет.

@rysalka · 26.05.2015, 12:45

загугли, как открыть консоль и название своего браузера

@Cdelphi78 · 26.05.2015, 12:52 **[ТС]**

У вас там даже ссылка не прописана, какой у вас браузер.

Добавлено через 4 минуты
Кстати. В IE верстка поплыла, меню стало вертикальным.

@rysalka · 26.05.2015, 12:55

где ссылка не прописана ?

HTML5

1	<a href="test.html">Все о Компьютерах</a>

хром, я всегда я верстки юзаю хром, потому что там удобно верстать, а насчет IE, я с ним не парюсь.. просто запрещаю доступ к сайту

@Cdelphi78 · 26.05.2015, 13:11 **[ТС]**

ааа, вы ее туда поместили, я то вот про вот эту кнопку "История создания".

Добавлено через 6 минут
Вы же не говорите что, не на ту кнопку назначили а я и не заметил, а я вот уже несколько дней, нажимаю на ту кнопку и ничего не происходит.
Вроде разобрался вы этот скрипт применяете к блоку .топ а как иитересно его к списку li применить, для каждой ссылки свой id заводить.

Новые блоги и статьи
Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .	Что такое NullReferenceException и как исправить? InfoMaster 08.01.2025 NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .	Что такое Null Pointer Exception (NPE) и как это исправить? InfoMaster 08.01.2025 Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .	Русский язык в консоли C++ InfoMaster 08.01.2025 При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .	Telegram бот на C# InfoMaster 08.01.2025 Разработка ботов для Telegram стала неотъемлемой частью современной экосистемы мессенджеров. C# предоставляет мощный и удобный инструментарий для создания разнообразных ботов, от простых. . .	Использование GraphQL в Go (Golang) InfoMaster 08.01.2025 Go (Golang) является одним из наиболее популярных языков программирования, используемых для создания высокопроизводительных серверных приложений. Его архитектурные особенности и встроенные. . .
Что лучше использовать при создании класса в Java: сеттеры или конструктор? Alexander-7 08.01.2025 Вопрос подробнее: На вопрос: «Когда одновременно создаются конструктор и сеттеры в классе – это нормально?» куратор уточнил: «Ваш класс может вообще не иметь сеттеров, а только конструктор и геттеры. . .	Как работать с GraphQL на TypeScript InfoMaster 08.01.2025 Введение в GraphQL и TypeScript В современной разработке веб-приложений GraphQL стал мощным инструментом для создания гибких и эффективных API. В сочетании с TypeScript, эта технология. . .	Счётчик на базе сумматоров + регистров и генератора сигналов согласования. Hrethgir 07.01.2025 Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .	Как перейти с Options API на Composition API в Vue.js BasicMan 06.01.2025 Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .	Архитектура современных процессоров inter-admin 06.01.2025 Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .	История создания реляционной модели баз данных, правила Кодда Programming 06.01.2025 Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,439
		1
	Открыть страничку в блоке div(css) 23.05.2015, 19:56. Показов 20315. Ответов 47 Метки нет (Все метки) Добрый день! Не знаю в эту ли тему пишу! Имеется html css страничка и нужно другую страничку открывать в блоке div размера. Миниатюры 0

@Armi 312 / 106 / 69 Регистрация: 18.04.2015 Сообщений: 346
	23.05.2015, 23:13	2
	Вам нужен ajax лучше всего с библиотекой jquery. 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,439
	24.05.2015, 15:59 [ТС]	3
	А подробней, можно пожалуйста,я новичек в скриптах. 0

@rysalka 5 / 5 / 6 Регистрация: 24.05.2015 Сообщений: 76
	24.05.2015, 17:37	6
	я вижу ошибку: $("main").load(path); замени на $(".main").load(path); 0

@Armi 312 / 106 / 69 Регистрация: 18.04.2015 Сообщений: 346
	24.05.2015, 19:59	7
	Опечатка. 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,439
	25.05.2015, 14:46 [ТС]	10
	Сообщение от rysalka я вижу ошибку: $("main").load(path); замени на $(".main").load(path); Заменил, не работает. Сообщение от alexsamos33 Mikhail Shell, Зачем так? Можно проще: Сделал так, работает, но у меня в блоке main находится текст, а фрейм появляется под ним, а мне нужно чтобы фрейм замещал этот текст(вместо текста) при нажатии на ссылку, а и как еще убрать границы у фрейма. 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,439
	25.05.2015, 20:55 [ТС]	12
	rysalka, Все равно не работает, у меня такое подозрение что может он не подключает библиотечку, всмысле ссылка не рабочая, щас попробую скачать. Добавлено через 13 минут Да что такое, равно не работает скачал jcvery 1.2.4 подключил не работает, скачал jquery 1.2.3, думаю в 1.2.4. нет таких функций но она идет в архиве zip, там куча файлов, как ее подключить? какой файл нужен? 0

@rysalka 5 / 5 / 6 Регистрация: 24.05.2015 Сообщений: 76
	25.05.2015, 22:54	13
	Вам эта не подошла https://ajax.googleapis.com/aj... ery.min.js ? 2.* версию желательно 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,439
	26.05.2015, 00:13 [ТС]	14
	дак не подошла- всмысле что не работает! так то все равно какую? 0

@rysalka 5 / 5 / 6 Регистрация: 24.05.2015 Сообщений: 76
	26.05.2015, 00:18	15
	откройте консоль и посмотрите, если ли ошибки.. (F12) http://192.162.135.7/soc.html я проверил только что - работает, можете нажать, сами проверить! 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,439
	26.05.2015, 12:43 [ТС]	16
	Сообщение от rysalka откройте консоль и посмотрите, если ли ошибки.. (F12) http://192.162.135.7/soc.html я проверил только что - работает, можете нажать, сами проверить! У меня не работает, какую консоль? если f12--> Консоль то там ничего нет. 0

@rysalka 5 / 5 / 6 Регистрация: 24.05.2015 Сообщений: 76
	26.05.2015, 12:45	17
	загугли, как открыть консоль и название своего браузера 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,439
	26.05.2015, 12:52 [ТС]	18
	У вас там даже ссылка не прописана, какой у вас браузер. Добавлено через 4 минуты Кстати. В IE верстка поплыла, меню стало вертикальным. 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,439
	26.05.2015, 13:11 [ТС]	20
	ааа, вы ее туда поместили, я то вот про вот эту кнопку "История создания". Добавлено через 6 минут Вы же не говорите что, не на ту кнопку назначили а я и не заметил, а я вот уже несколько дней, нажимаю на ту кнопку и ничего не происходит. Вроде разобрался вы этот скрипт применяете к блоку .топ а как иитересно его к списку li применить, для каждой ссылки свой id заводить. 0