淡出所有元素，然后淡入选定的元素

Question

我想做的是有一个与DIV框匹配的链接列表。 我希望一次只显示一个div，而隐藏所有其他区域（链接菜单除外）。

我知道如何编写代码以淡出div，然后淡入一个新的div，但我不知道如何编写它，因此它在所有链接之间都是“通用的”。

这有意义吗？

首次进入该页面时，将出现一个“闪屏”页面（id =“ splash”）。 菜单将浮动，将有4-6个链接。 当您单击链接“ 1”时，它会淡出初始页面，而淡入页面“一个”。 当您单击链接“ 4”时，它将淡出页面“一”并淡入页面“四”。

有人可以帮我写吗，所以我要做的就是为链接分配一个类，并且它是合适的div？ 我是新人...

Answer 1

一个带有启动画面和三页的示例；

<div class="page" id="splash">
   splash content
</div>
<div class="page" id="page1" style="display: none;">
   page 1 content
</div>
<div class="page" id="page2" style="display: none;">
   page 2 content
</div>
<div class="page" id="page3" style="display: none;">
   page 3 content
</div>

<a href="#" onclick="switchPage(1); return false;">Page 1</a>
<a href="#" onclick="switchPage(2); return false;">Page 2</a>
<a href="#" onclick="switchPage(3); return false;">Page 3</a>

<script type="text/javascript">
function switchPage(x) {
   jQuery(".page").fadeOut(600, function() { jQuery("#page" + x).fadeIn(600); }
}
</script>

Answer 2

我没有样式，但我想这就是您想要的。 您也可以通过Ajax加载页面，但是我只是用不同的视图制作了一个页面。

标记：

<div id="menu">
    <ul>
        <li><a href="#">Splash</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
    </ul>
</div>
<div id="container">
    <div id="splash">
        Splash
    </div>
    <div style="display:none;">
        Page 1
    </div>
    <div style="display:none;">
        Page 2
    </div>
</div>

的CSS

#container > div {
    position: absolute;
}

和脚本

$(function() {
    var divs = $("#container > div");
    var links = $("#menu a").click(function(e) {
        e.preventDefault();
        var pageToShow = divs.eq(links.index(this));
        if(!pageToShow.is(":hidden")) {
            return;
        }
        divs.not(':hidden').fadeOut('slow', function() {
            pageToShow.fadeIn('slow');
        });
    });
});