2


我正在尝试在多个 div 之间制作褪色效果。但它不起作用，请任何人帮助我“我是 javascript 新手”
这是我生成代码的演示。
在这个演示中，代码运行良好，但是当我复制代码时，它停止工作。
希望我的问题很清楚！谢谢
这是我尝试复制的代码。

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>

txt1 = $("#contentarea-1").text();
txt2 = $("#contentarea-2").text();

$("#pg1").on('click', function () {
    $('#contentarea-2').hide();
    $('#contentarea-1').fadeOut(500, function () {
        $("#contentarea-1").hide(txt2);
        $('#contentarea-1').fadeIn(500);
    });
});

$("#pg2").on('click', function () {
    $('#contentarea-1').hide();
    $('#contentarea-2').fadeOut(500, function () {
        $("#contentarea-2").text(txt2);
        $('#contentarea-2').fadeIn(500);
    });
});

</script>

<style>
#content-wrapper{
    margin-left: 50px;
}
#contentarea-1{
    width: 450px;
}

#contentarea-2{
    width: 450px;
    display:none;
}

#clear{
    clear: both;
}

nav{
    text-align: center;
}

nav ul{
    list-style: none;
}

nav ul li{
    display: inline-block;
    padding: 15px;
}
</style>

<nav>
    <ul>
        <li><a href="#1" id="pg1">Page 1</a></li>
        <li><a href="#2" id="pg2">Page 2</a></li>
    </ul>
</nav>
<div id="content-wrapper">
    <div id="contentarea-1">
        <wbr><p>FIRST PAGE</p></wbr>
    </div>
    <div id="contentarea-2">
        <wbr><p> SECOND PAGE</p></wbr>
    </div>
    <div id="clear"></div>
</div>
4

2 回答 2

2

只需要稍作改动。您忘记将 javascript 包装在 jquerydomready容器中：

http://jsfiddle.net/3tx8u/

<script>
$(function() {
    txt1 = $("#contentarea-1").text();
    txt2 = $("#contentarea-2").text();

    $("#pg1").on('click', function () {
        $('#contentarea-2').hide();
        $('#contentarea-1').fadeOut(500, function () {
            $("#contentarea-1").hide(txt2);
            $('#contentarea-1').fadeIn(500);
        });
    });
    $("#pg2").on('click', function () {
        $('#contentarea-1').hide();
        $('#contentarea-2').fadeOut(500, function () {
            $("#contentarea-2").text(txt2);
            $('#contentarea-2').fadeIn(500);
        });
    });
});
</script>
于 2013-05-04T16:43:20.313 回答
1

您必须在document ready函数内执行代码。

描述：指定当 DOM 完全加载时要执行的函数。

它确保在尝试访问和使用它们之前将所有页面对象加载到 DOM 中。

在 jsFiddle 中，您的代码有效，因为您选择在“onload”中运行脚本代码，在没有 onload 的真实代码中，您必须使用 document.ready

$(document).ready(function () {

    txt1 = $("#contentarea-1").text();
    txt2 = $("#contentarea-2").text();
    $("#pg1").on('click', function () {
        $('#contentarea-2').hide();
        $('#contentarea-1').fadeOut(500, function () {
            $("#contentarea-1").hide(txt2);
            $('#contentarea-1').fadeIn(500);
        });
    });
    $("#pg2").on('click', function () {
        $('#contentarea-1').hide();
        $('#contentarea-2').fadeOut(500, function () {
            $("#contentarea-2").text(txt2);
            $('#contentarea-2').fadeIn(500);
        });
    });
});

工作小提琴：http: //jsfiddle.net/IrvinDominin/KBGp7/4/

于 2013-05-04T16:55:17.030 回答