3

私がやろうとしているのは、異なる div を切り替えることです。説明するのはちょっと難しいですが、試してみます。

ページが読み込まれると、表示される div と、display:none の 4 があります。そして、メニューがあるでしょう。リンク 1 は最初の div を表示し、他のすべてを非表示にします。次に、リンク 2 をクリックすると、表示されている div が非表示になり、div2 が表示されます。リンク 3 をクリックすると、表示されている div が非表示になり、div3 が表示されます。基本的に、一度に表示される div は 1 つだけです。

私はこれを書きましたが、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>

4

4 に答える 4

7

リンクを次のように定義する場合：

<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();
});
于 2012-09-02T14:18:38.540 に答える
3

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();
    });
});
于 2012-09-02T14:55:39.077 に答える
0

リンクの ID と div の間にリンクを作成します。

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

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

});

したがって、基本的には最初にすべての div を非表示にしてから、クリックされた ID に対応するものを表示します。これはユーザーにはわかりません。そのため、現在のステータスに基づいて切り替える代わりに。すべてをオフに切り替えてから、必要なものをオンに切り替えると考えてください。

于 2012-09-02T14:24:14.383 に答える