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

Answer 2

问题是您使用slides.removeClass('active').fadeOut('slow');。首先它将删除活动类，这意味着（根据您的CSS）它将是一个常规div，因此具有属性display: none;。

所以你的div会被自动隐藏。只有在你之后才能在隐藏的div上进行fadeOut('slow')。

最好是做一些事情：

$('div.active').fadeOut(1000).delay(1000).removeClass('active');
$(this).delay(2000).fadeIn(1000).delay(1000).addClass('active');

Answer 3

如果我正确理解了这个问题，这是有效的。

问题在于，您无法淡入隐藏或未加盖隐藏的元素。

<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').hide();
                    $(this).addClass('active');
                    $(this).data('slide').addClass('active').fadeIn('slow');
                });
        });
    </script>

在它的位置淡出一个div和另一个

3 个答案: