Перейти к публикации
xXapokalypsesXx

Помогите сделать HTML страничку с навигацией без перезагрузки

Рекомендованные сообщения

xXapokalypsesXx

Помогите сделать HTML страничку с навигацией без перезагрузки.

Помню когда-то видел что-то подобное, но сейчас никак не могу найти.

Вот например:

post-1260-0-24216700-1372158770_thumb.png

 

При клике на любой знак зодиака без перезагрузки страницы появляется под ним определенная информация.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
sanabek

Не пробовал через iframe?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
xXapokalypsesXx

@sanabek, нет, не пробовал

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Серёга

А что если попробовать сделать при помощи табов?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
TheAndrey

А что если попробовать сделать при помощи табов?

Самый оптимальный вариант.

Смысла использовать здесь ajax нет, поскольку контента немного - страница будет весить мало.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
xXapokalypsesXx

Всем спасибо, вопрос решён :)

Вот и сам код, кому надо будет:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var current = 's1';
function show(id) {
	document.getElementById(current).style.display = 'none';
	document.getElementById(id).style.display = 'block';
	current = id;
}
</script>
<style type="text/css">
#s2, #s3, #s4, #s5, #s6, #s7, #s8, #s9, #s10, #s11, #s12 {
	display: none;
}
</style>
</head>
<body>
<a href="#" onclick="show('s1'); return false;">Страница 1</a>
<a href="#" onclick="show('s2'); return false;">Страница 2</a>
<a href="#" onclick="show('s3'); return false;">Страница 3</a>
<a href="#" onclick="show('s4'); return false;">Страница 4</a>
<a href="#" onclick="show('s5'); return false;">Страница 5</a>
<a href="#" onclick="show('s6'); return false;">Страница 6</a>
<a href="#" onclick="show('s7'); return false;">Страница 7</a>
<a href="#" onclick="show('s8'); return false;">Страница 8</a>
<a href="#" onclick="show('s9'); return false;">Страница 9</a>
<a href="#" onclick="show('s10'); return false;">Страница 10</a>
<a href="#" onclick="show('s11'); return false;">Страница 11</a>
<a href="#" onclick="show('s12'); return false;">Страница 12</a>
<div id="s1">Страница 1</div>
<div id="s2">Страница 2</div>
<div id="s3">Страница 3</div>
<div id="s4">Страница 4</div>
<div id="s5">Страница 5</div>
<div id="s6">Страница 6</div>
<div id="s7">Страница 7</div>
<div id="s8">Страница 8</div>
<div id="s9">Страница 9</div>
<div id="s10">Страница 10</div>
<div id="s11">Страница 11</div>
<div id="s12">Страница 12</div>
</body>
</html>

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
a-droid

@sanabek, извращенец!

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
vir2oz

@a-droid, да да да  :trolo8:

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Гость
Эта тема закрыта для публикации сообщений.

×
×
  • Создать...