Question

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

我想在每个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

Answer 2

您可以使用fadeIn()或fadeOut()。

像这样使用：

$('selector').fadeIn(); // you can use time in ms, inside ()

同样，您也可以使用fadeOut。但请记住，您已将最新版本的jQuery链接到您的网页。

链接：

http://jquery.com

Answer 3

这是一个稍微过时的（2012年8月）教程，向您展示淡化元素，淡化它们并将它们淡化为特定不透明度所需的HTML，CSS和JavaScript。

http://www.mkyong.com/jquery/jquery-fadein-fadeout-and-fadeto-example/

您实际上是在尝试了解以下内容：

淡入，淡出Div

3 个答案: