jQuery jquery一一切换多个div

Toggle multiple divs one by one jquery

提问by Nikolay Petrov

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.

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

---

---

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.

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

---

---

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

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

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

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

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

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>

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

回答by pimvdb

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/.

然后你可以让事情变得简单：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();
});

回答by nbrooks

jsFiddle Demo

jsFiddle 演示

HTML:

HTML：

<a href='#' class='link'>link 1</a>
<div id='#div1' class='panel active'> Visible </div>
<a href='#' class='link'>link 2</a>
<div id='#div1' class='panel'> Visible </div>
<a href='#' class='link'>link 3</a>
<div id='#div1' class='panel'> Visible </div>

CSS:

CSS：

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

JS:

JS：

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

回答by Himanshu

This might help you to toggle n number of divs'.

这可能会帮助您切换 n 个 div'。

**$(document).ready(function(){
        $("a[data-toggle]").on("click", function(e) {
          e.preventDefault();  // prevent navigating
          var selector = $(this).data("toggle");  // get corresponding selector from data-toggle
          //alert(selector);
          $(selector).fadeIn(1000);
          $(selector).siblings().hide();
        });
    });**

回答by Christian J?rgensen

I would create a link between the ID of the link and the div:

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

$(".link").click(function() {

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

});

So you basically hide all the divs first and then display the one that corresponds to the ID that was clicked. This is not noticeable for the user. So instead of toggling based on current status. Think of it as toggling all off, and then toggle the one you want on.

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