0

我正在尝试构建一个本质上是一页的网页，但有四个“隐藏”的 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>`

（注意：我只把谷歌作为链接目标，因为我不知道还能放什么）。

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，但此时它严重超出了我的深度。不过，我将继续学习教程，所以希望我能掌握它。

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

谢谢！

4

3 回答 3

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

于 2013-10-16T15:12:52.333 回答
0

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

像这样使用它：

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

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

链接：

http://jquery.com

于 2013-10-16T15:01:50.480 回答
0

这是一个略微过时（2012 年 8 月）的教程，向您展示了淡入、淡出和淡出元素到特定不透明度所需的 HTML、CSS 和 JavaScript。

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

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

于 2013-10-16T15:03:13.760 回答