逐个切换多个div jquery

我想要做的是在不同的div之间切换。 这有点难以解释，但我会试一试。

---

当页面加载时，会有div可见，4有display：none。 还有一个菜单。 链接1将显示第一个div并隐藏所有其他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(); $('.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'); }); }); 

并link

Answer 1

如果您按如下方式定义链接​​：

 link 1 link 2 
div 1
 
div 2 

然后你可以轻松搞定 ： 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(); }); 

Answer 2

jsFiddle演示

HTML：

 link 1 
 Visible 
 link 2 
 Visible 
 link 3 
 Visible  

CSS：

 div.panel { display:none; } div.panel.active { display:block; } 

JS：

 $(function() { $(".link").click(function(e) { e.preventDefault(); $('div.panel:visible').hide(); $(this).next('div.panel').show(); }); }); 

Answer 3

我会在链接的ID和div之间创建一个链接：

 $(".link").click(function() { var idIndex = parseInt(this.attr("id")); // Extracts the number of the ID $(".divs").hide(); $("#div" + idIndex).show(); }); 

因此，您基本上首先隐藏所有div，然后显示与单击的ID对应的div。 这对用户来说并不明显。 因此，而不是根据当前状态切换。 把它想象成全部关闭，然后切换你想要的那个。