0

我可以淡入淡出不同的 div 内容，但我希望当我们打开网站时，第一个 div 内容已经可见。

现在，我必须单击其中一个链接来显示内容。我希望默认情况下第一个 div 可见，然后我们可以在单击链接时淡入和淡出其他 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 }
4

2 回答 2

0

这将显示第一个 div

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

    });
于 2012-07-26T15:00:01.153 回答
0

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

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