1

クリック時にdivを置き換えようとしています。そのために、私は次のスクリプトを使用しています

$(function(){
var $containers = $("#center > div").hide();

$('div span a').each(function(i,el){
  var idx = i;
  $(this).click(function(e){
    var $target = $containers.filter(':eq(' + idx + ')');
    // Fade out visible div
    if($containers.filter(':visible').not($target).length){
      $containers.filter(':visible').fadeOut();
    }
    // Fade in new div if not already showing
    $target.not(':visible').fadeIn();
    e.preventDefault();
  })
})
});

htmlコードは

<div>
 <div>
<span><a href="#">Home</a></span>
  <span><a href="#">About us</a></span>
<span><a href="#">Specifications</a></span>
<span><a href="#">Contact us</a></span>
</div>
<div id="center">
<div class="container">
Hey , this is Home div contents

</div>
<div class="container">
 Hey , this is About us div contents

</div>
<div class="container">
 Hey , this is Specifications div contents

</div>

<div class="container">
 Hey , this is Contact us div contents

  </div>
    </div>
  </div>

ここでは、すべてのdivが最初は非表示になっています。それに応じてクリックすると1番目のdivと他のdivを表示したい

助けてください、

ありがとう

4

6 に答える 6

1

： firstselectorを使用する

例 ： 

$(function(){
    var $containers = $("#center > div").hide();
    $("#center > div:first").show(); // OR $containers.first().show();
            // existing code
});
于 2012-10-27T10:36:46.330 に答える
1

これを交換してください

var $containers = $("#center > div").hide();

これとともに 

var $containers = $("#center > div").not(':eq(0)').hide();

デモ

于 2012-10-27T10:40:45.517 に答える
1

1）最初を除くすべてのdivを非表示にする

2）タブクリックで、すべてのdivをフェードアウトし、クリックされたインデックスに対応するdivをフェードインします

$("#center").children().not(':first').hide();

$('div span a').click(function(ev) {
    $('#center').children().fadeOut().eq($(this).parent().index()).fadeIn();
    ev.preventDefault();
}
于 2012-10-27T10:41:11.570 に答える
1

交換するだけ

var $containers = $("#center > div").hide();

と

var $containers = $("#center > div").not(':first').hide();

于 2012-10-27T10:41:16.047 に答える
1

このようにしてみてください

$(function(){
var $containers = $("#center > div").not(':eq(0)').hide();

$('div span a').each(function(i,el){
  var idx = i;
  $(this).click(function(e){
    var $target = $containers.filter(':eq(' + idx + ')');
    // Fade out visible div
    if($containers.filter(':visible').not($target).length){
      $containers.filter(':visible').fadeOut();
    }
    // Fade in new div if not already showing
    $target.not(':visible').fadeIn();
    e.preventDefault();
  })
})
});​
于 2012-10-27T10:43:38.373 に答える
1 
var $containers = $("#center > div").hide();
$containers.first().show()

$('div span a').click(function(e){
    e.preventDefault(); 
    var ind = $(this).parent().index();
    $containers.fadeOut().filter(':eq('+ind+')').fadeIn()
})

http://jsfiddle.net/kCa6w/

于 2012-10-27T10:43:49.463 に答える