Чередовать видимость двух divs

как я могу делать, чтобы чередовать видимость двух divs, а именно (если "item1" шоу "item2" hide и наоборот?

<div><a>Item 1</a></div> <!-- Click para mostrar Item2 y ocultar Item1 -->
<div><a>Item 2</a></div> <!-- Click para mostrar Item1 y ocultar Item2 -->
2
задан 09.04.2016, 19:15
3 ответа

Используя Jquery мы можем делать их следующими.

$("div").click(function(){  
  $("div").show();
  $(this).hide();  
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div><a>Item 1</a></div> <!-- Click para mostrar Item2 y ocultar Item1 -->
<div style="display: none;"><a>Item 2</a></div> <!-- Click para mostrar Item1 y ocultar Item2 -->
6
ответ дан 24.11.2019, 14:37
  • 1
    Спасибо weimar! Простой, и функционируй совершенно. – Diego 10.04.2016, 02:22

Форма может быть:

$("#div1").click(function(){  
  $('#div2').toggle(); 
  $('#div1').toggle(); 
});
$("#div2").click(function(){  
 $('#div1').toggle();
 $('#div2').toggle(); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="show" id="div1"><a>Item 1</a></div> <!-- Click para mostrar Item2 y ocultar Item1 -->
<div style="display: none;" id="div2"><a>Item 2</a></div> <!-- Click para mostrar Item1 y ocultar Item2 -->
0
ответ дан 24.11.2019, 14:37

Asuimiendo, что у нас есть изначально один из divs, я скрываю например:

<div><a>Item 1</a></div>
<div class="display:none"><a>Item 2</a></div>

будет достаточно выбирать оба и выполнять метод .toggle() в обоих:

$("#div1,#div2").toggle();

.toggle() покажи элемент, если он скрытый или это скрывает, если он видимый.

Полный пример:

$("#div1,#div2").click(function(){
  $("#div1,#div2").toggle();
});
#div2 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1"><a>Item 1</a></div>
<div id="div2"><a>Item 2</a></div>
0
ответ дан 24.11.2019, 14:37

Теги

Похожие вопросы