逐个切换多个div jquery

Question

我想要做的是在不同的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');
  });
});

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

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