Нужно сделать что-то типа страницы-презентации. Работает в CHROME, OPERA, FIREFOX, Safari. Ну а ИЕ, как обычно, выделяется.
Ошибки: скрытие элементов не происходит(тех, которых надо), в тег div#content тоже ничего не появляется. Помогите, пожалуйста!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Змиевская балка</title>
<style type="text/css">
body{
background-color:#B7B7B7;
}
h1{
text-align:center;
font-family: Tahoma, Geneva, sans-serif;
color: #FFF;
background-color: #8A0000;
}
h2{
margin:0;
padding:0;
color:#FFF;
}
ul#navbar{
padding:0;
margin-left:1%;
margin-top:0;
width: 20%;
float:left;
display:inline;
}
ul#navbar li{
list-style-type:none;
padding-left:0;
margin-left:0;
background-color:#919191;
font-size:1.2em;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
color: #000;
border-top: 1px #8A0000 solid;
}
ul#navbar li.hover{
background-color:#212121;
color:#E8E8E8;
cursor:pointer;
}
div#content{
width:76%;
border:1px #8A0000 solid;
padding:6px;
font-family: Arial, Helvetica, sans-serif;
color: #000;
font-size: 18px;
margin-left:1%;
float:left;
}
div#content img{
margin:0.7em;
margin-right:0;
margin-left:25%;
border:2px #003 solid ;
}
#content ul{
list-style-type:square;
}
button {
padding-left:0;
margin-left:0;
background-color:#919191;
font-size:1.2em;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
color: #000;
border:none;
border-top: 1px #8A0000 solid;
text-align:right;
}
</style>
<script type="text/javascript">
window.onload = function(){
var Presentation = function(content,ul){ //класс, определяющий презентацию; content - элемент, куда выводятся слайды; ul - содержание презентации
this.slide = 0; // Первый слайд по умолчанию
this.context = content;
this.ul = ul;
var lis = []; //созание
var ch = this.ul.childNodes; //массива,
for(var i=0; i<=ch.length-1; i++){ //содержащего
if(ch[i].nodeType==1) //пункты
if(ch[i].tagName=='LI'){ //содержания
lis.push(ch[i]);
}
}
this.lis=lis;
this.updatePres = function(slide){ //Функция, с помощью которой осуществляется переход к новому слайду с номером slide или this.slide
if(slide<0||this.slide<0) slide=0;
if(slide>this.lis.length-1||this.slide>this.lis.length-1) slide=this.lis.length-1;
this.slide = (slide!==undefined)? slide: this.slide;
var div = this.lis[this.slide].nextSibling;
while(div.nodeType!=1){
div=div.nextSibling;
}
this.context.innerHTML = '<h2>'+this.lis[this.slide].innerHTML+'</h2><br/>'+div.innerHTML;
}
}
var pres = new Presentation(document.getElementById('content'),document.getElementById('navbar')); //создание экземпляра класса
pres.updatePres(); //сразу же обновим презентацию (1-й слайд)
for(var i=0; i<=pres.lis.length-1; i++){ //проходим по всем элементам <LI>
var div = pres.lis[i].nextSibling;
while(div.nodeType!=1){
div=div.nextSibling;
}
div.style.display = "none"; //находим следующий после LI тег и скрываем его (style.display="none")
pres.lis[i].slideNumber=i; //добавляем свойство - просто свойство к пункту списка. Не знаю, на сколько я здесь прав. Свойство отображает соотв. номер слайда
pres.lis[i].onclick = function(){ //обновляем презентацию в соответствии со slideNum (номер слайда)
pres.updatePres(this.slideNumber) ;
}
pres.lis[i].onmouseover = function(){this.className = 'hover';}
pres.lis[i].onmouseout = function(){this.className = '';} // :hover не роботает в ИЕ, поэтому пришлось поизвращаться))
}
var prev = document.getElementById('prev');
var next = document.getElementById('next');
prev.onclick = function(){
pres.updatePres(pres.slide-1);
}
next.onclick = function(){
pres.updatePres(pres.slide+1);
} // Создание кнопок СЛЕД. СЛАЙД и ПРЕД.СЛАЙД и простых событий для них
}
</script>
</head>
<body>
<h1>Змиёвская балка</h1>
<!--Navbar-->
<ul id="navbar">
<li>Холокост</li>
<div>Холокост — систематическое преследование и истребление немецкими ...
</div>
<li>Великая отечественная война</li>
<div>Великая Отечественная война началась на территории СССР 22 июня 1941 года. Стремительно вторгались на территорию страны нацистские войска. Потери были огромными...</div>
<li>Первая окупация Ростова</li>
<div>...
.</div>
<li>Вторая окупация Ростова</li>
<div><img src="2окуп1.jpg" width="400" /><br/>Вторично Ростов-на-Дону был захвачен вермахтом 23 июня 1942 г. Так как представители советской власти до последнего момента утверждали, что...</div>
<li>Массовая казнь ростовчан</li>
<div> <img src="хоолокост2.GIF" width="400"/><br/>Вскоре после захвата города был созван еврейский совет старейших, который возглавил доктор Лурье...</div>
<li>Свидетельства очевидцев</li>
<div><img src="баб1.jpeg" height="350" /><br />По свидетельствам очевицев, еще несколько дней после казни земля шевелилась, и оттуда неслись стоны раненных людей, но фашисты окружили место казни и под страхом смерти не разрешали жителям города помогать несчастным.<br /><img src="дедушка2.jpg" height="350" /></div>
<li>Мемориал на Змиёвской балке</li>
<div><img src="б1.jpg" /><br/>
9 мая 1975 года в Змиёвской балке был открыт мемориал жертвам нацизма. В центре комплекса находилась мемориальная группа, олицетворявшая жертв фашизма. Перед мемориальной группой горел вечный огонь. Также в мемориальный комплекс входил музей, в котром экспонировались фотографии и предметы с места казни и свидетельства очевидцев. Пионеры со всего Ростова возлагали цветы на Братскую могилу в праздничные дни. Там же октябрят принимали в пионеры.
</div>
<li>Состояние мемориала в наши дни</li>
<div><img src="б3.jpg" width="450"/><br />В 1990-е и 2000-е годы мемориал пришёл в плачевное состояние - музей не работал, асфальтовое покрытие дорожек разрушилось, газ в горелку "вечного" огня не подавался. В 2009 году начаты ремонтно-восстановительные работы. Мемориал в Змиевской балке восстановлен в конце ноября 2009-го года <br /><img src="б2.JPG" width="650" style="margin-left:15%"/> </div>
<p></p>
<button style="width:100%; " id="next">Следующий слайд</button><br />
<button style="width:100%; " id="prev">Предыдущий слайд</button>
</ul>
<div id="content"></div>
</body>
</html>