Перейти к содержимому

Сервис обмена электронных валют

Партнерская программа Kredov

  • Закрытая тема Тема закрыта

Как подгружать содержимое на страницу без перезагрузки

#1 kovyaro

kovyaro
  • Пользователь
  • 14 сообщений
  • Репутация: 0
0

Отправлено 24 Март 2011 - 13:35

ZiTosS, извините, опять пишу не в той теме, надеюсь вы выделите ее в отдельную.
Вопрос возник в следующим, как подгружать содержимое на веб страницу при клике по пункту меню. В приведенном ниже примере содержимое должно находиться в container2. По идее содержимое должно находиться в отдельных файлах.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Main</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container1">
<a href="http://www.tsogu.ru/" title="официальный сайт" target="_blank"><div id="logo"></div></a>
<div id="slog">
<font color="#FFFFFF" size="+2"><b>Использование компьютерных технологий в науке и образовании</b></font>
</div>
</div>
<div class="navi">
<ul>
<li><a href="123.html" title="">Главная</a></li>
<li><a class="hide" href="">В науке</a>
<ul>
<li><a href="" title="">Страница 1</a></li>
<li><a href="" title="">Страница 1.1</a></li>
<li><a href="" title="">Страница 1.2</a></li>
<li><a href="" title="">Страница 1.3</a></li>
</ul>
</li>
<li><a class="hide" href="">В образовании</a>
<ul>
<li><a href="" title="">Страница 2</a></li>
<li><a href="" title="">Страница 2.1</a></li>
<li><a href="" title="">Страница 2.2</a></li>
<li><a href="" title="">Страница 2.3</a></li>
</ul>
</li>
<li><a class="hide" href="">Об авторе</a>
<ul>
<li><a href="" title="">Страница 3</a></li>
<li><a href="" title="">Страница 3.1</a></li>
<li><a href="" title="">Страница 3.2</a></li>
<li><a href="" title="">Страница 3.3</a></li>
</ul>
</li>
</ul>
</div>
<div id="titl"></div>
<div id="container2"></div>
<div id="container3"></div>
</body>
</html>


На большое ко-во пунктов в меню "Об авторе" не обращайте внимание, это по заданию нужно, про себя, про группу, про универ и т.д. :)

 

 

  • 0

#2 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 24 Март 2011 - 14:45

kovyaro,
http://www.masterweb...&...ost&p=54206
  • 0

#3 kovyaro

kovyaro
    Topic Starter
  • Пользователь
  • 14 сообщений
  • Репутация: 0

Отправлено 24 Март 2011 - 17:21

Спасибо, то что надо.
  • 0

#4 kovyaro

kovyaro
    Topic Starter
  • Пользователь
  • 14 сообщений
  • Репутация: 0

Отправлено 25 Март 2011 - 09:14

Ага, поторопился, там просто отображается содержимое разных контейнеров размещены на той же странице. А мне надо загрузку из других HTML файлов форматированного текста, картинок и т.д.
  • 0

#5 surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 25 Март 2011 - 10:55

возможно это будет полезно
http://dklab.ru/lib/JsHttpRequest/
http://forum.vingrad...opic-53291.html
http://yandex.ru/yan...82&...0&lr=970
  • 0

#6 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 25 Март 2011 - 15:28

Ага, поторопился, там просто отображается содержимое разных контейнеров размещены на той же странице. А мне надо загрузку из других HTML файлов форматированного текста, картинок и т.д.

kovyaro,
там 2 ссылки и 2 варианта.
Первый — меняется содержимое блоков из той же страницы (Tab Content Script)
второй — Аякс версия: загружается содержимое из внешних хтмл-файлов (Dynamically selecting a tab/ loading an external page)
  • 0

#7 Shramik

Shramik
  • Пользователь
  • 17 сообщений
  • Репутация: 0

Отправлено 28 Март 2011 - 07:22

Попробуй посмотреть в исходниках
  • 0

#8 kovyaro

kovyaro
    Topic Starter
  • Пользователь
  • 14 сообщений
  • Репутация: 0

Отправлено 28 Март 2011 - 07:32

Что то с трудом мне это дается. Если позволите, давайте разберем по кускам. Первое, что надо сделать, это получить содержимое href из пункта меню.
Вот, что я сделал, и сделал неправильно. Так в чем ошибка?
<script type="text/javascript">
		$(document).ready(function()
		{
			$(".navi a").click(function() //Срабатывает при клике на пунк меню
			{
				var href_new = $(this).attr(href); //Получение href
				window.alert(href_new); //Проверка, получен ли href
			});
		});
  </script>

Вот собственно момент определения клика по пункту меню и вызывает сильные сомнения.
Класс navi:
.navi
{
	margin:0 auto;
	background:#000;
	font-family: Georgia, "Times New Roman", Times, serif;
  width:1000px;
  height:21px;
}

.navi ul li a, .navi ul li a:visited
{
	display:block;
	text-decoration:none;
	color:#000;
	width:250px;
	height:21px;
	text-align:center;
	color:#fff;
	background:#000;
	line-height:20px;
	overflow:hidden;
}

.navi ul
{
  padding:0;
  margin:0;
  list-style:none;
}

.navi ul li
{
  float:left;
  position:relative;
}

.navi ul li ul {display:none;}

.navi ul li:hover a
{
  color:#090;
  background:#333;
}

.navi ul li:hover ul
{
  display:block;
  position:absolute;
  top:21px;
  left:0;
  width:105px;
}

.navi ul li:hover ul li a
{
  display:block;
  background:#333;
  color:#FFF;
}

.navi ul li:hover ul li a:hover
{
  color:#090;
}

Само меню:
<div class="navi">
<ul>
<li><a href="123.html" title="">Главная</a></li>
<li><a class="hide" href="">В науке</a>
<ul>
<li><a href="" title="">Страница 1</a></li>
<li><a href="" title="">Страница 1.1</a></li>
<li><a href="" title="">Страница 1.2</a></li>
<li><a href="" title="">Страница 1.3</a></li>
</ul>
</li>
<li><a class="hide" href="">В образовании</a>
<ul>
<li><a href="" title="">Страница 2</a></li>
<li><a href="" title="">Страница 2.1</a></li>
<li><a href="" title="">Страница 2.2</a></li>
<li><a href="" title="">Страница 2.3</a></li>
</ul>
</li>
<li><a class="hide" href="">Об авторе</a>
<ul>
<li><a href="" title="">Страница 3</a></li>
<li><a href="" title="">Страница 3.1</a></li>
<li><a href="" title="">Страница 3.2</a></li>
<li><a href="" title="">Страница 3.3</a></li>
</ul>
</li>
</ul>
</div>

  • 0

#9 surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 28 Март 2011 - 08:44

копай в сторону xmlhttprequest
  • 0

#10 kovyaro

kovyaro
    Topic Starter
  • Пользователь
  • 14 сообщений
  • Репутация: 0

Отправлено 28 Март 2011 - 10:48

Хм, честно говоря, я не очень понял в каком направлении копать. Поскольку я первый раз столкнулся с Веб дизайном, то испытываю определенные трудности. Нельзя ли на пальцах объяснить. В частности, то что я указывал в предыдущем посте, как получить href, который лежит в пункте меню? В чем ошибка в представленном java коде. Второй момент, как на основании полученного href произвести загрузку содержимого в контейнер container2, средствами процедуры .load?
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru