Question

我可以淡出＆amp;不同的div内容，但我想在我们打开网站时，第一个div内容已经可见。

目前，我必须点击其中一个链接来显示内容。我希望默认情况下第一个div可见，然后我们可以淡入＆amp;当我们点击链接时，与其他div内容一起出去。在这种情况下，当我们到达网页时，lorem ipsum div应该在开始时可见。

    <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 }

Answer 1

这将显示第一个div

     $(function(){
        var $containers = $("#animators > div").hide();  //hides all divs
        $("#animators").next().show();   //then shows just the one with <p> you want

    });

Answer 2

您已经在div变量中检索了容器$containers元素。您可以使用它来显示第一个div并避免再次抓取它：

var $containers = $("#animators > div").hide();
$containers.eq(0).show();

淡入＆amp;输出div内容，默认情况下第一个div可见

2 个答案: