Загрузка html-страницы в div по нажатию кнопки меню - HTML и CSS

Решетова Алена · 23.03.2013, 18:09

О, Боги программирования! Помогите, пожалуйста! Голова уже болит((
Можно же сделать так, чтобы в один div загружалась какая-нибудь страница html по нажатию кнопки меню в другом div? Как во frame. Я весь инет облазила. Все примеры, какие находила, у меня не работали. Напишите пожалуйста код для одной кнопочки)

Код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Новая страница 1</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="wrapper">
  <div id="header" >Голова</div>
  <div id="main">
    <div id="menu" >
    <br> ссылка 1
    <br> ссылка 2
    <br> ссылка 3
    </div>
    <div id="content" >Контент</div>
  </div>
  <div id="footer">Футер</div>
</div>
</body>
</html>

Код:

body {
    margin:0;
    padding:0;
    background: #edebd5;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #000;
}

#wrapper {
    width:960px; /*Ширина блока*/
    height:100%; /*Высота блока*/
    margin:0 auto;
}

#header {
    width:960px; /*Ширина блока*/
    height:150px; /*Высота блока*/
    margin:0 auto;
    background:#00ff00;
}

#main {
    width:960px; /*Ширина блока*/
    height:700px; /*Высота блока*/
    margin:0 auto;
    left:0px;
    top:150px;
}

#menu {
    width:200px; /*Ширина блока*/
    height:700px; /*Высота блока*/
    margin:0 auto;
    float: left;
    left:0px;
    top:0px;
    background:#f0ff0f;
}

#content {
    width:760px; /*Ширина блока*/
    height:700px; /*Высота блока*/
    margin:0 auto;
    float: right;
    left:200px;
    top:0px;
    background:#808080;
}

#footer {
    width:960px; /*Ширина блока*/
    height:80px; /*Высота блока*/
    margin:0 auto;
    left:0px;
   top:850px;
    background:#0000ff;
}

Чтобы при нажатии на кнопку "ссылка 1" в блоке "menu" загружалась страница 1.htm в блок "content"

Решетова Алена · 23.03.2013, 19:11

УМОЛЯЮ!!! ПОЖАЛУЙСТА!!!

Решетова Алена · 23.03.2013, 19:29

Кто-нибудь объяснит мне, почему рабочие примеры у меня не работают? Например этот : http://codething.ru/ajax_js.php я скачала http://codething.ru/files/ajax_js_ex.zip но у меня не работает. Ещё кучу примеров перебрала((

Решетова Алена · 23.03.2013, 19:30

жалко потраченного весь день! времени( так и не нашла решение(((

Решетова Алена · 23.03.2013, 19:32

Всё ещё жду помощи

Решетова Алена · 23.03.2013, 20:37

Почему этот код работает только в FireFox и загружает только текст, а цвет фона не загружает?

Код:

<!DOCTYPE html>
<html>
<head>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
     <script>
         $(document).ready(function(){
             $('#but_load').click(function(){
                 $('#for_load').load('example.html');
             });
         });
     </script>
     <style type='text/css'>
        #for_load{
            width:500px;
            height:300px;
            border:2px solid black;
            margin-bottom: 10px;
        }
        #but_load{
            width:500px;
            height:100px;
            border:2px solid black;
        }
     </style>
<head>
<body>
     <div id='for_load'></div>
     <div id='but_load'></div>
</body>
</html>

Лубышев · 24.03.2013, 03:18

Возможно потому что скрипт должен быть не на локалке а на серваке. AJAX не хочет локально работать)

Решетова Алена · 24.03.2013, 07:11

Здесь же вроде не ajax, а javascript? Дак значит все таки нельзя сделать, если у меня сайт не на сервере, а в папке на компе? Печаль((( А может все таки можно? Кто-нибудь знает как?

Решетова Алена · 24.03.2013, 07:12

А какой сервер? Что для этого надо? Ну мне уже очень интересно. Ввязалась в эту тему. Мучаюсь, думаю.. На интерес.

Лубышев · 24.03.2013, 12:15

Ну как же не AJAX

Код:

  <script src="http://code.jquery.com/jquery-latest.js"></script>

Вот подключаете библиотеку Jquery

Код:

$('#for_load').load('example.html');

Вот используете AJAX
Функция load это упрощенный вызов ajax. Надстроена над функцией ajax.
Может не работать потому, что скорее всего ваы запускаете у себя на компьютере. Попробуйте куда нить на какой нить веб сервер залить. хотябы на "Народ".
Или поставте вебсервер себе. например воспользуйтесь ДЕНВЕРом

24.03.2013, 03:18	#7
Лубышев Участник клуба Регистрация: 23.07.2007 Сообщений: 1,054	Возможно потому что скрипт должен быть не на локалке а на серваке. AJAX не хочет локально работать) Писано по д'Эльфийски

24.03.2013, 12:15	#10
Лубышев Участник клуба Регистрация: 23.07.2007 Сообщений: 1,054	Ну как же не AJAX Код: `<script src="http://code.jquery.com/jquery-latest.js"></script>` Вот подключаете библиотеку Jquery Код: `$('#for_load').load('example.html');` Вот используете AJAX Функция load это упрощенный вызов ajax. Надстроена над функцией ajax. Может не работать потому, что скорее всего ваы запускаете у себя на компьютере. Попробуйте куда нить на какой нить веб сервер залить. хотябы на "Народ". Или поставте вебсервер себе. например воспользуйтесь ДЕНВЕРом Писано по д'Эльфийски

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Загрузка HTML страницы в програму	Andrey770	Общие вопросы Delphi	2	27.07.2012 20:57
Загрузка html страницы	DinamoBrynsk	Работа с сетью в Delphi	6	13.12.2010 14:16
Загрузка html-страницы между определёнными тегами	medved6216	Помощь студентам	13	13.11.2009 14:21
как вызвать по нажатию кнопки меню настройки клавиатуры, мыши, монитора	1234	Общие вопросы Delphi	2	10.09.2008 16:52

23.03.2013, 19:11	#2
Решетова Алена Форумчанин Регистрация: 13.12.2012 Сообщений: 116	УМОЛЯЮ!!! ПОЖАЛУЙСТА!!!

23.03.2013, 19:29	#3
Решетова Алена Форумчанин Регистрация: 13.12.2012 Сообщений: 116	Кто-нибудь объяснит мне, почему рабочие примеры у меня не работают? Например этот : http://codething.ru/ajax_js.php я скачала http://codething.ru/files/ajax_js_ex.zip но у меня не работает. Ещё кучу примеров перебрала((

23.03.2013, 19:30	#4
Решетова Алена Форумчанин Регистрация: 13.12.2012 Сообщений: 116	жалко потраченного весь день! времени( так и не нашла решение(((

23.03.2013, 19:32	#5
Решетова Алена Форумчанин Регистрация: 13.12.2012 Сообщений: 116	Всё ещё жду помощи

24.03.2013, 07:11	#8
Решетова Алена Форумчанин Регистрация: 13.12.2012 Сообщений: 116	Здесь же вроде не ajax, а javascript? Дак значит все таки нельзя сделать, если у меня сайт не на сервере, а в папке на компе? Печаль((( А может все таки можно? Кто-нибудь знает как?

24.03.2013, 07:12	#9
Решетова Алена Форумчанин Регистрация: 13.12.2012 Сообщений: 116	А какой сервер? Что для этого надо? Ну мне уже очень интересно. Ввязалась в эту тему. Мучаюсь, думаю.. На интерес.