fading out all elements, then fading in selected one

What I'd like to do is have a list of links that will match up with a DIV box. I would like for only one div to show at a time, and have all others be hidden, EXCEPT for the menu of links.

开发者_如何学Python

I understand how to write the code to fade out a div, then fade in a new one, but I don't know how to write it so it's 'universal' between all the links.

Does this make sense?

When you first enter the page, there will be a 'splash' page (id="splash"). The menu will be floating and there will be 4-6 links. When you click on link '1' it will fade out the splash page, fade in page 'one'. When you click link '4', it will fade out page 'one' and fade in page 'four'.

Can someone help me write it so all I have to do is assign a class to the link and it's appropriate div? I'm a flippin newb...

---

An example with a splash and three pages;

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

---

I haven't styled this but I think this is what you want. You could also load the pages via ajax but I simply made one page with different views.

The markup:

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

The css

#container > div {
    position: absolute;
}

And the script

$(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');
        });
    });
});