javascript - 淡入淡出 Div

Question

我正在尝试构建一个基本上只有一页的网页，但有四个“隐藏”div，当您单击底部的菜单按钮时，它们会淡入淡出。

我想在每个 div 的顶部放置一个“关闭”按钮，这样您就可以“关闭”那个 div - 但如果在新菜单项出现时 div 仍然自行淡出，那就太好了点击。到目前为止，我已经使用 css 和 html 创建了 div 框和链接，但在 javascript 方面我绝对是个新手。这是我到目前为止的代码

HTML:

<div class="menu">
    <a class="portfolio" href="http://www.google.com"> Portfolio </a> | <a  class="aboutme" href="http://www.google.com"> About Me </a> | <a class="education" href="http://www.google.com"> Education</a> | <a class="contact" href="http://www.google.com"> Contact</a>
</div>
<div>`

(注意:我只把 google 作为链接目标，因为我不知道还能放什么)。

CSS:

.aboutmewindow
{
    width:583px;
    height:557px;
    border-bottom-style:dashed;
    position:absolute;
    top:0px;
    z-index:2;  
}

.portfoliowindow
{
    width:583px;
    height:557px;
    border-bottom-style:dashed;
    position:absolute;
    top:0px;
    z-index:2;  
}

.educationwindow
{
    width:583px;
    height:557px;
    border-bottom-style:dashed;
    position:absolute;
    top:0px;
    z-index:2;  
}

.contactwindow
{
    width:583px;
    height:557px;
    border-bottom-style:dashed;
    position:absolute;
    top:0px;
    z-index:2;  
}`

我尝试过自己编写一些 javascript，但目前我的理解能力严重不足。不过，我会继续学习教程，所以希望我能掌握它的窍门。

有人有什么建议吗？还是好的教程？

谢谢!

Answer 1

你可以试试这个，这是一个简单的例子，但没有你所有的标记和代码，你可以理解这个想法..需要 jQuery

http://jsfiddle.net/YnzRV/9/

$(function(){

    $("#main > .box").not(":first").hide();

    $(".menu").on("click", "a", function(){

        var $this = $(this),
            dataBox = $this.data("box");

        $("#main > .box").hide();
        $("."+dataBox).fadeIn(400);

        return false;
    });

});

如果您检查 jsfiddle，您将看到我如何添加通过点击处理程序传递的数据属性，以告诉它使用数据属性显示哪个 div