1 
<!DOCTYPE html>
<html>

    <head>
        <script src="jquery.js"></script>
        <script>
            $(document).ready(function (e) {
                e.preventDefault;
                $("a").click(function (event) {
                    var url = $(this).attr('href');
                    event.preventDefault();
                    $("#bg").slideDown(1000, function () {
                        $("#content").hide().load(url + ' #content', function () {
                            $("#bg").slideUp(1000);
                            $(this).show();
                        });
                    });
                });
            });
        </script>
        <style>
            nav ul li {
                display: inline;
                padding: 0px 20px;
                text-decoration: none;
            }
            #bg {
                position: fixed;
                top: 100px;
                transition: all 2s;
                background-color: gray;
                z-index:25;
                width: 100%;
                height: 500px;
                display: none;
            }
        </style>
    </head>

    <body>
        <div>
                <h2>DEMO</h2>

            <nav>
                <ul>
                    <li>
                        <a href="first.html#content">First</a>
                        <li>
                            <a href="second.html#content">Second</a>
                            <li>
                                <a href="third.html#content">Third</a>
                </ul>
            </nav>
            <div id="all">
                <div id="bg"></div>
                <p id="content">banna third Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
                    erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
                    consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
                    accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
                    augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta
                    nobis eleifend option congue nihil imperdiet doming id quod mazim placerat
                    facer possim assum. Typi non habent claritatem insitam; est usus legentis
                    in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores
                    legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus,
                    qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera
                    gothica, quam nunc putamus parum claram, anteposuerit litterarum formas
                    humanitatis per seacula quarta decima et quinta decima. Eodem modo typi,
                    qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
            </div>
        </div>
    </body>

</html>

我曾经发布过另一个问题

我解决了窗帘动画部分，但现在无法动态更改内容

我还有两个 html 文件 second.html 和 third.html

在内容改变之前，窗帘需要落下

窗帘隐藏文字后，内容必须改变

内容更改后，窗帘必须抬起以显示新内容

4

0 回答 0