|
Сообщение от Altos
|
Есть 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>