0

さまざまなdivコンテンツをフェードインおよびフェードアウトできますが、Webサイトを開いたときに、最初のdivコンテンツがすでに表示されていることを望んでいます。

今のところ、コンテンツを表示するにはリンクの1つをクリックする必要があります。デフォルトで最初のdivを表示したいので、リンクをクリックすると、他のdivコンテンツでフェードインおよびフェードアウトできます。この場合、lorem ipsum divは、開始時にWebページに到達したときに表示されるはずです。

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  document.documentElement.className += " js"; // Add js class to the HTML element

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

    $('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(700, function(){
            $target.not(':visible').fadeIn(700);
          });
        } else {
          $target.not(':visible').fadeIn(700);
        }

        e.preventDefault();
      })
    })
  });

</script>

これは私のHTML部分です

    <div id="animators">
    <div class="container">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor, est a mollis pellentesque, purus quam commodo ligula, quis laoreet ipsum enim quis nulla. Nulla leo odio, sollicitudin ut cursus lacinia, placerat in erat. Donec tempor justo vitae enim varius eu placerat arcu pulvinar. Integer fermentum placerat diam, eget bibendum lacus aliquam aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In tellus tortor, fringilla in pulvinar a, ultrices eget magna. Nam in cursus tellus. Donec gravida semper massa in pulvinar. Proin ac dolor nulla, eget vestibulum dui. Vivamus pulvinar ullamcorper ligula nec sollicitudin. Nunc pulvinar cursus tempus.</p>
    </div>
    <div class="container">
     <ul>
      <li>stuff2</li>
      <li>stuff2</li>
      <li>stuff2</li>
     </ul>
    </div>
    <div class="container">
     <ul>
      <li>stuff3</li>
      <li>stuff3</li>
      <li>stuff3</li>
     </ul>
    </div>
    <div class="container">
      <li>stuff4</li>
      <li>stuff4</li>
      <li>stuff4</li>
    </div>
</div>

そして、この場合は重要ではありませんが、私のCSS部分

.js #animators { position: absolute; height: 300px}
.js #animators div.container { position: absolute; left: 0; top: 0 }
4

2 に答える 2

0

div変数内のコンテナー要素は既に取得してい$containersます。これを使用して最初のものを表示し、div再度取得する必要がないようにすることができます。

var $containers = $("#animators > div").hide();
$containers.eq(0).show();
于 2012-07-26T15:05:09.907 に答える