逐个切换多个div jquery [英] Toggle multiple divs one by one jquery

问题描述

我试图做的是在不同div之间切换。这很难解释，但我会试一试。

---

当页面加载时，会有div可见和4与显示：无。而且会有一个菜单。链接1会显示第一个div并隐藏所有其他的。然后当点击链接2时，可见的div将隐藏并显示div2。点击链接3时，可见的div将隐藏，div3会显示等等。
基本上一次只显示一个div。

---

我写了这个，但它只有在有2个div时才有效。

  $（function（）{
 $（'＃link'）。click（function（）{
 $（'＃div1，＃div2' ）.toggle（）; 
}）; 
}）; 
  

但这只会显示隐藏的div并隐藏显示的那个。

好的，我做到了，发现它可以轻松完成。这是我做的。它不是很优雅，但它的工作原理。

  $（document）.ready（function（）{
 $（' .slidingDiv'）。hide（）; 
 $（'。show_hide'）。show（）; 
 $ b $（'。show_hide'）。click（function（）{
 $（'。slidingDiv'）。slideToggle（）; 
 $（'。slidingDiv2'）。hide（'slow'）; 
 $（'。slidingDiv3'）。hide（'slow'） ;'b $ b $（'。slidingDiv4'）。hide（'slow'）; 
 $（'。slidingDiv5'）。hide（'slow'）; 
}）; 
 }）; 
 $ b $（document）.ready（function（）{
 $（'。slidingDiv2'）。hide（）; 
 $（'。show_hide2'）。show（） ; 
 $ b $（'。show_hide2'）。click（function（）{
 $（'。slidingDiv2'）。slideToggle（）; 
 $（'。slidingDiv'） （'slow'）; 
 $（'。slidingDiv3'）。hide（'slow'）; 
 $（'。slidingDiv4'）。hide（'slow'）; 
 $（'。slidingDiv5'）。hide（'slow'）; 
}）; 
}）; 
 $ b $（document）.ready（function（）{
 $（'。slidingDiv3'）。hide（）; 
 $（'。show_hide3'）。show（） ; 
 $ b $（'。show_hide3'）。click（function（）{
 $（'。slidingDiv3'）。slideToggle（）; 
'（'。slidingDiv'） （'slow'）; 
 $（'。slidingDiv2'）。hide（'slow'）; 
 $（'。slidingDiv4'）。hide（'slow'）; 
 $（'。slidingDiv5'）。hide（'slow'）; 
}）; 
}）; 
 $ b $（document）.ready（function（）{
 $（'。slidingDiv4'）。hide（）; 
 $（'。show_hide4'）。show（） ; 
 $ b $（'。show_hide4'）。click（function（）{
 $（'。slidingDiv4'）。slideToggle（）; 
'（'。slidingDiv'） （'slow'）; 
 $（'。slidingDiv2'）。hide（'slow'）; 
 $（'。slidingDiv3'）。hide（'slow'）; 
 $（'。slidingDiv5'）。hide（'slow'）; 
}）; 
}）; 
 $ b $（文档）.ready（函数（）{
 $（'。slidingDiv5'）。hide（）; 
 $（'。show_hide5'）。show（） ; 
 $ b $（'。show_hide5'）。click（function（）{
 $（'。slidingDiv5'）。slideToggle（）; 
 $（'。slidingDiv'） （'slow'）; 
 $（'。slidingDiv2'）。hide（'slow'）; 
 $（'。slidingDiv3'）。hide（'slow'）; 
 $（'。slidingDiv4'）。hide（'slow'）; 
}）; 
}）; 
  

和< a href =＃class =show_hide> ;< span class =nav> link< / span>< / a>

解决方案

如果您按以下方式定义连结：

 < a href =＃data-toggle =＃div1 >链接1< / a> 
< a href =＃data-toggle =＃div2>连结2< / a> 
 
< div id =div1> div 1< / div> 
< div id =div2> div 2< / div> 
  

然后您就可以轻松完成任务： http://jsfiddle.net/A8Ymj/ 。

  $（ （click，function（e）{
 e.preventDefault（）; //防止导航
 var selector = $（this）.data（toggle （）; $ b $（selector）.show（）; 
））; //从数据切换获得相应的选择符
 $（div）。 
  

What i am trying to do is toggle between different div's. It's kinda hard to explain but i'll give it a try.

---

When the page loads there would be div that is visible and 4 with display:none. And there would be a menu. link 1 would show the first div and hide all others. Then when clicking link 2 the div that is visible will hide and div2 would show. When clicking link 3 the div that is visible will hide and div3 would show and so on. Basically only one div shown at a time.

---

I wrote this but it works only when there are 2 divs.

$(function () {
  $('#link').click(function () { 
    $('#div1, #div2').toggle();
  });
});

but this would only show the hidden div and hide the one that is shown.

Okay, i did it and found out that it can be done much easier. Here's what i did. It's not very elegant but it works.

$(document).ready(function () {
  $('.slidingDiv').hide();
  $('.show_hide').show();

  $('.show_hide').click(function () {
    $('.slidingDiv').slideToggle();
    $('.slidingDiv2').hide('slow');
    $('.slidingDiv3').hide('slow');
    $('.slidingDiv4').hide('slow');
    $('.slidingDiv5').hide('slow');
  });
});

$(document).ready(function () {
  $('.slidingDiv2').hide();
  $('.show_hide2').show();

  $('.show_hide2').click(function () {
    $('.slidingDiv2').slideToggle();
    $('.slidingDiv').hide('slow');
    $('.slidingDiv3').hide('slow');
    $('.slidingDiv4').hide('slow');
    $('.slidingDiv5').hide('slow');
  });
});

$(document).ready(function () {
  $('.slidingDiv3').hide();
  $('.show_hide3').show();

  $('.show_hide3').click(function () {
    $('.slidingDiv3').slideToggle();
    $('.slidingDiv').hide('slow');
    $('.slidingDiv2').hide('slow');
    $('.slidingDiv4').hide('slow');
    $('.slidingDiv5').hide('slow');
  });
});

$(document).ready(function () {
  $('.slidingDiv4').hide();
  $('.show_hide4').show();

  $('.show_hide4').click(function () {
    $('.slidingDiv4').slideToggle();
    $('.slidingDiv').hide('slow');
    $('.slidingDiv2').hide('slow');
    $('.slidingDiv3').hide('slow');
    $('.slidingDiv5').hide('slow');
  });
});

$(document).ready(function(){
  $('.slidingDiv5').hide();
  $('.show_hide5').show();

  $('.show_hide5').click(function () {
    $('.slidingDiv5').slideToggle();
    $('.slidingDiv').hide('slow');
    $('.slidingDiv2').hide('slow');
    $('.slidingDiv3').hide('slow');
    $('.slidingDiv4').hide('slow');
  });
});

And <a href="#" class="show_hide"><span class="nav">link</span></a>

解决方案

If you define your links as follows:

<a href="#" data-toggle="#div1">link 1</a>
<a href="#" data-toggle="#div2">link 2</a>

<div id="div1">div 1</div>
<div id="div2">div 2</div>

Then you can make things easy: http://jsfiddle.net/A8Ymj/.

$("a[data-toggle]").on("click", function(e) {
  e.preventDefault();  // prevent navigating
  var selector = $(this).data("toggle");  // get corresponding selector from data-toggle
  $("div").hide();
  $(selector).show();
});

这篇关于逐个切换多个div jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！