При нажатии на кнопку менять блок.

[Altos]

Добрый день. Я далек от js но потребовалось реализовать скрипт.
Есть 10 div'ов (Условно присвоим им классы "odin", "dva", ..., "desiat".) и 4 кнопки. При нажатии на кнопку 1 должен исчезнуть/спрятаться/замениться див "odin" и на его месте появиться див "dva", при следующем нажатии должен див "dva" замениться на див "tri" и т. д. При нажатии на кнопку два все должно происходить в обратную сторону.
Кнопки 3 и 4 по умолчанию спрятаны. На 10 диве кнопка 1 должна быть заменена на кнопку 3. А на первом диве кнопка 2 должна заменяться на кнопку 4.
Ну или можно сделать кучу кнопок. Например в див "odin" вставляем кнопки "1" и "2", при нажатии на кнопку два див исчезает вместе с кнопками и появляется див "dva" с кнопками "3" и "4" и далее в таком духе.

[ksa]

На 10 диве кнопка 1 должна быть заменена на кнопку 3. А на первом диве кнопка 2 должна заменяться на кнопку 4.

Какая-то мудреная замена.

Есть 10 div'ов (Условно присвоим им классы "odin", "dva", ..., "desiat".) и 4 кнопки.

Ты хоть бы тестовый пример сделал, не поленился...

[Altos]

Какая-то мудреная замена.


Ты хоть бы тестовый пример сделал, не поленился...

Попробую объяснить что хочу добиться: Условно говоря есть 10 страниц. Страницы сделаны на всю высоту экрана при помощи vh. К нижней части экрана абсолютным позиционированием прикреплен div с текстом. При нажатии на кнопку этот див должен меняться на следующий. на последнем диве должен случиться переход на страницу два, где количество таких дивов другое. Когда дивы закончатся должен произойти переход на страницу 3 и т.д. а так-же в обратном порядке.
Сейчас это реализовано просто заменой страниц. То есть меняется не див, а страница полностью.
Код html и css могу сделать, но в js я вообще не в зуб ногой.

[Dilettante_Pro]

Написал до того, когда увидел про страницы.

<button id="up">⇑</button>
<button id="down">⇓</button>
<div>Один</div>
<div style="display:none;">Два</div>
<div style="display:none;">Три</div>
<div style="display:none;">Четыре</div>
<script>
   var divs = document.querySelectorAll('div'), i = 0;
   down.onclick = function() {
        divs[i].style.display="none";
        i = (i < (divs.length - 1))?i+1:0;
        divs[i].style.display="block";
   }
   up.onclick = function() {
        divs[i].style.display="none";
        i = (i > 0)?i-1:divs.length - 1;
        divs[i].style.display="block";
   }

</script>

А другие страницы уже загружены в html?

[Altos]

Какая-то мудреная замена.


Ты хоть бы тестовый пример сделал, не поленился...

<button id="up">⇑</button>
<button id="down">⇓</button>
<div>Один</div>
<div style="display:none;">Два</div>
<div style="display:none;">Три</div>
<div style="display:none;">Четыре</div>
<script>
   var divs = document.querySelectorAll('div'), i = 0;
   down.onclick = function() {
        divs[i].style.display="none";
        i = (i < (divs.length - 1))?i+1:0;
        divs[i].style.display="block";
   }
   up.onclick = function() {
        divs[i].style.display="none";
        i = (i > 0)?i-1:divs.length - 1;
        divs[i].style.display="block";
   }

</script>

Каждая страница это отдельный файл html

[Dilettante_Pro]

Симуляция нескольких страниц

<button id="up">⇑</button>
<button id="down">⇓</button>
<div class="page">
   <div class="section">Один</div>
   <div class="section" style="display:none;">Два</div>
   <div class="section" style="display:none;">Три</div>
   <div class="section" style="display:none;">Четыре</div>
</div>
<div class="page">
   <div class="section" style="display:none;">Пять</div>
   <div class="section" style="display:none;">Шесть</div>
   <div class="section" style="display:none;">Семь</div>
</div>
<script>
   var pages = document.querySelectorAll('.page'),
         divs = pages[0].querySelectorAll('div'),
         i = 0, j = 0;
   down.onclick = function() {
        divs[i].style.display="none";
        i = (i < (divs.length - 1))?i+1:0;
        if(i == 0) {    // здесь как-бы загрузка предыдущей страницы
            j = (j > 0)?j -1:pages.length - 1;
            divs = pages[j].querySelectorAll('div')
        }
        divs[i].style.display="block";
   }
   up.onclick = function() {
        divs[i].style.display="none";
        i = (i > 0)?i -1:divs.length - 1;
        if(i == divs.length - 1) { // здесь как-бы загрузка следующей страницы
            j = (j < (pages.length - 1))?j+1:0;
            divs = pages[j].querySelectorAll('div');
            i = divs.length - 1;
        }
        divs[i].style.display="block";
   }

</script>

[ksa]

Код html и css могу сделать

Так с этого и нужно начинать.

Де у меня есть вот "это"... Хочу с "этим" сделать вот "так"...

[Altos]

Так с этого и нужно начинать.

Де у меня есть вот "это"... Хочу с "этим" сделать вот "так"...

<header class="baner">
    <div class="img">
   <img src="images/#" alt="">
        <button class="arrow left">next</div>
        <button class="arrow right">down</div>
           <div class="form_1">
                <h2 class="heading">Имя</h2>
                <p class="text" >текст</p>
            </div>
            <div class="form_2">
                <h2 class="heading">имя 2</h2>
                <p class="text" >текст 2 </p>
            </div>
            <div class="form_3">
                <h2 class="heading">Имя 3</h2>
                <p class="text" >текст 3</p>
            </div>
            <div class="form_4">
                <h2 class="heading">имя 4</h2>
                <p class="text" >текст 4 </p>
            </div>
<div class="alert">
        <p class="warning" >ПОВЕРНИТЕ УСТРОЙСТВО</p>
    </div>
    </div>
</header>

А есть еще css который позиционирует все так, что бы не было вертикальной прокрутки. Вставлять его сюда неразумно так как он на 200 строк.
И таких страниц 11 штук с разным количеством form.

[ksa]

Есть 10 div'ов (Условно присвоим им классы "odin", "dva", ..., "desiat".) и 4 кнопки. При нажатии на кнопку 1 должен исчезнуть/спрятаться/замениться див "odin" и на его месте появиться див "dva", при следующем нажатии должен див "dva" замениться на див "tri" и т. д. При нажатии на кнопку два все должно происходить в обратную сторону.
Кнопки 3 и 4 по умолчанию спрятаны. На 10 диве кнопка 1 должна быть заменена на кнопку 3. А на первом диве кнопка 2 должна заменяться на кнопку 4.

Скажи спасибо камраду Dilettante_Pro за тестовый пример.

Вот мой вариант по твоему "заданию"...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='https://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.off {
	display: none;
}
#box > div {
	display: none;
}
#box > .on {
	display: block;
}
</style>
<script type='text/javascript'>
$(function(){
	var ob=$('button');
	ob.eq(0).click(function(){
		var o=$('#box > .on');
		var on=o.next();
		if (on.length>0) {
			o.removeClass('on');
			on.addClass('on');
		} else {
			$(this).addClass('off');
			ob.eq(1).removeClass('off')
		};
	});
	ob.eq(2).click(function(){
		var o=$('#box > .on');
		var on=o.prev();
		if (on.length>0) {
			o.removeClass('on');
			on.addClass('on');
		} else {
			$(this).addClass('off');
			ob.eq(3).removeClass('off')
		};
	});
})
</script>
</head>
<body>
<button>1</button>
<button class='off'>3</button>
<button>2</button>
<button class='off'>4</button>
<div id='box'>
	<div class='on'>Один</div>
	<div>Два</div>
	<div>Три</div>
	<div>Четыре</div>
	<div>Пять</div>
	<div>Шесть</div>
	<div>Семь</div>
	<div>Восемь</div>
	<div>Девять</div>
	<div>Десять</div>
</div>
</body>
</html>

[ksa]

И таких страниц 11 штук с разным количеством form.

А где аналоги кнопок 3 и 4?