Toggle multiple divs one by one jquery

问题

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>

回答1:

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

回答2:

jsFiddle Demo

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

回答3:

I would create a link between the ID of the link and the 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.

来源：https://stackoverflow.com/questions/12236629/toggle-multiple-divs-one-by-one-jquery

标签

jquery

html

toggle