Переключение блоков

455

24 ноября 2016, 09:50

Всем доброго времени суток, столкнулся с такой проблемой есть блок с классом block2, который открыт и два блока block1,block3, которые скрыты. Подскажите, как сделать так чтобы кликая по + становился аквным следующий блок, а если нажать на -, то активным становился предыдущий?

<div classs="left">-</div>
<div class="right">+</div>
<br>
<div class="block1">1</div>
<div class="block2">2</div>
<div class="block3">3</div>
<br>
<div class="block1">1</div>
<div class="block2">2</div>
<div class="block3">3</div>
.right {
  height: 10px;  
  width: 10px;
}
.left {
  height: 10px; 
  width: 10px;
}
.block1,.block3 {
  display: none;
}

Answer 1

например:

$('.left').on('click', function(){ 
  var 
    item = $('.block2'), 
    prev = item.prev(), 
    next = item.next(); 
   
  prev.show(); 
  next.hide(); 
      
}); 
 
$('.right').on('click', function(){ 
  var 
    item = $('.block2'), 
    prev = item.prev(), 
    next = item.next(); 
   
  next.show(); 
  prev.hide(); 
      
});

.right, 
.left { 
  height: 10px;   
  width: 10px; 
} 
 
.block1,.block3 { 
  display: none; 
} 
 
/* Доп.стилизация для наглядности */ 
.right, 
.left { 
  display: inline-block; 
  padding: 2rem; 
  cursor: pointer; 
}

<script src="https://code.jquery.com/jquery-2.0.3.js"></script> 
   
<div class="left">-</div> 
<div class="right">+</div> 
 
<br> 
<div class="block1">1</div> 
<div class="block2">2</div> 
<div class="block3">3</div> 
<br> 
<div class="block1">1</div> 
<div class="block2">2</div> 
<div class="block3">3</div>

Answer 2

$(document).on("click",".right",function(){
    var idx;
    var len=$(".colum_hidden")
    $(".colum_hidden").each(function(i,e){
        if($(this).hasClass("active")){
            idx=i;
            $(this).removeClass("active");
        }
    }) 
    idx++
    idx=(idx==3)?idx=0:idx;
    len.eq(idx).addClass("active")
})
$(document).on("click",".left",function(){
    var idx;
    var len=$(".colum_hidden")
    $(".colum_hidden").each(function(i,e){
        if($(this).hasClass("active")){
            idx=i;
            $(this).removeClass("active");
        }
    }) 
    idx--;
    console.log(idx)
    idx=(idx==0)?idx=2:idx;
    console.log(idx)
    len.eq(idx).addClass("active")
}) 
<div class="left">-</div>
<div class="right">+</div>
<br>
<div class="colum_hidden">1</div>
<div class="colum_hidden active">2</div>
<div class="colum_hidden">3</div>