逐一切换多个div的jquery方法

Question

我试图实现的是在不同的div之间切换。有点难以解释，但我会尝试说明。

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

我写了这个代码，但它仅适用于两个div。

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

但这只会显示隐藏的div并隐藏已经显示的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');
  });
});

而且 <a href="#" class="show_hide"><span class="nav">链接</span></a>

- Nikolay Petrov

Answer 1

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

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

那么你可以简化事情：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();
});

- pimvdb

---

如果我没错的话，这会显示下一个 div，对吗？如果我先点击第四个链接，然后再点击第三个呢？ - Nikolay Petrov

好的，我尝试过了，但失败了。我甚至复制粘贴了jsfiddle中的所有内容，但仍然无法使其正常工作。有什么线索吗？ - Nikolay Petrov

@user1623157：只是为了确保 - jsFiddle 能够正常工作并且符合您的要求吗？ - pimvdb

这很棒 @pimvdb，谢谢 - cpk

Answer 2

jsFiddle演示

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（层叠样式表）：

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();
    });
});

- nbrooks

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。这对用户来说是不可感知的。因此，不要根据当前状态进行切换，而是将其视为全部切换关闭，然后切换您想要打开的那一个。

- Christian Jørgensen

Answer 4

这可能会帮助您切换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();
        });
    });**

- Himanshu