javascript - 淡出一个 div，另一个淡入，在它的位置

Question

有 3 个 div 和 3 个链接。

一次只能显示一个div。当用户单击其他 div 之一的链接时，当前的应该淡出，而所选的应该淡入，以代替之前的 div。

这是目前的代码:

Javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        switches = $('#switches > li');
        slides = $('#slides > div');
        switches.each(function(idx) {
                $(this).data('slide', slides.eq(idx));
            }).click(
            function() {
                switches.removeClass('active');
                slides.removeClass('active').fadeOut('slow');
                $(this).addClass('active');
                $(this).data('slide').addClass('active').fadeIn('slow');
            });
    });
</script>

CSS

    <style style="text/css">
        ul {
            list-style: none;
        }
        li:hover {
            text-decoration: underline;
        }

        #switches .active {
          font-weight: bold;
        }

        #slides div {
          display: none;
        }

        #slides div.active {
          display: block;
        }

        .outer {
            position: absolute;
        }
        .outer div {
            width: 600px;
            height: 300px;
        }
        #uno {
            background-color: red;
        }
        #dos {
            background-color: blue;
        }
        #tres {
            background-color: green;
        }
    </style>

HTML

    <ul id="switches">
        <li class="active">First slide</li>
        <li>Second slide</li>
        <li>Third slide</li>
    </ul>

    <div class="outer" id="slides">
        <div class="active" id="uno">
            First div.
        </div>
        <div id="dos">
            Second div.
        </div>
        <div id="tres">
            Third div.
        </div>
    </div>

您可以在此处查看页面: http://dl.dropbox.com/u/6920023/proofOfConcept.html

我正在尝试使用标准 Jquery 来执行此操作，但显然我的 javascript 代码有问题。

您能找出问题所在以及如何解决吗？

Answer 1

您的 CSS 定义了一个未激活的 div。因此，一旦您删除 active 类，它就会立即隐藏。

因此，删除此条目:

    #slides div {
      display: none;
    }

并在页面加载时添加类似这样的内容:

$(function() {
    $('#slides div:not([class="active"])').hide();
}); // will hide inactive slides initially but not always