jQuery AJAX加载内容，加载的内容就像一个单独的文档

时间：2014-05-10 14:47:29

标签： jquery ajax

我有一个网页，我想用Ajax加载内容，而不是我所做的，但我希望代码能够处理来自加载内容的链接。到目前为止，加载的内容似乎表现为一个单独的文档（如果我点击加载内容上的链接，它会打开一个新窗口），这不是我的意图。

js file 

    $(document).ready(function() {
    $(".zoom").hover( zoomIn );
    $(".zoom").mouseout( zoomOut );
    $(".zoom").click( select );
    function zoomIn() {

            $(this).animate({
              left:'10px',
              height:'190px',
              width:'190px',
            });
            $(this).css({"border-radius": "110px"});

    }
        function zoomOut() {
            $(this).animate({
              left:'-10px',
              height:'140px',
              width:'140px'
            });
            $(this).css({"border-radius": "90px"});

    }
            function select() {
            $(this).css({"border":"8px #e53cc7 solid", "border-radius": "110px"});
            $(".zoom").not(this).css({"border":"none"});

    }
    function getRandom(num){
        var my_num = Math.floor(Math.random()*num);
        return my_num;
    }
}); //End document.ready()
$(function () {
//ajax load of main div content specified in links  
       // attaching click handler to links
    $("a.loadnew").click(function (e) {
        // cancel the default behaviour
        e.preventDefault();

        // get the address of the link
        var href = $(this).attr('href');

        // getting the desired element for working with it later
        var $wrap = $('#ajax-main');

        $wrap
            // removing old data
            .html('')

            // slide it up
            .slideUp()

            // load the remote page
            .load(href + ' #content', function () {
                // now slide it down
                $wrap.slideDown();
            });
    });
});

主要的HTML 

<html>
<head>
    <title>Winter Olympics' Champions</title>
    <link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
    <!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <meta name="description" content="Educational apps for Android devices, smartphones, tablets. Language learning, coding, studying, various subjects." />
    <meta name="keywords" content="Android app, educational, language learning, self study, mobile devices, smartphone, tablet" />
    <link rel="stylesheet" type="text/css" href="styles/stylewinter.css" />
</head>
<body>
    <header>
        <div id="tagline">
            <h1>Winter Olympics' Champions</h1>
            <h2>the best in their category</h2>
        </div>
    </header>

    <nav>
        <div id="wrapper">
                <a class="loadnew" href="loadcontent/skiing.html"><img class="zoom" src="images/alpineskiing.png" alt="alpine skiing" /></a>
                <a class="loadnew" href="loadcontent/biathlon.html"><img class="zoom" src="images/biathlon.png" alt="biathlon" /></a>
                <a class="loadnew" href="loadcontent/bobsleigh.html"><img class="zoom" src="images/bobsleigh.png" alt="bobsleigh" /></a>
                <a class="loadnew" href="loadcontent/icehokey.html"><img class="zoom" src="images/icehokey.png" alt="ice hokey" /></a>
                <a class="loadnew" href="loadcontent/luge.html"><img class="zoom" src="images/luge.png" alt="luge" /></a>
                <a class="loadnew" href="loadcontent/skating.html"><img class="zoom" src="images/skating.png" alt="skating" /></a>
    </div>
    </nav>

    <div id="contentwrapper">
        <div id="ajax-main">

        </div>
    </div>

    <footer>
    </footer>
    <script src="scripts/my_scripts.js"></script>
</body>


<div id="content"><a class="loadnew" href="loadcontent/figure.html">content1</a><br/><a class="loadnew" href="loadcontent/speed.html">content2</a><br/><a class="loadnew" href="loadcontent/shortspeed.html">content3</a></div>

1 个答案:

答案 0 :(得分：0)

某种程度上 load（）表现得很有趣，所以我用普通的 $。get（）代替它。我还修改了你的代码并使用了委托（就像我在第一个答案中提到的那样）将点击事件绑定到所有 a.loadnew （你可以稍后将JS从这里移到另一个文件中） ，就像你以前一样）：

<html>
<head>
    <title>Winter Olympics' Champions</title>
    <link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
    <!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <meta name="description" content="Educational apps for Android devices, smartphones, tablets. Language learning, coding, studying, various subjects." />
    <meta name="keywords" content="Android app, educational, language learning, self study, mobile devices, smartphone, tablet" />
    <link rel="stylesheet" type="text/css" href="styles/stylewinter.css" />
</head>
<body>
    <header>
        <div id="tagline">
            <h1>Winter Olympics' Champions</h1>
            <h2>the best in their category</h2>
        </div>
    </header>

    <nav>
        <div id="wrapper">
            <a class="loadnew" href="loadcontent/skiing.html"><img class="zoom" src="images/alpineskiing.png" alt="alpine skiing" /></a>
            <a class="loadnew" href="loadcontent/biathlon.html"><img class="zoom" src="images/biathlon.png" alt="biathlon" /></a>
            <a class="loadnew" href="loadcontent/bobsleigh.html"><img class="zoom" src="images/bobsleigh.png" alt="bobsleigh" /></a>
            <a class="loadnew" href="loadcontent/icehokey.html"><img class="zoom" src="images/icehokey.png" alt="ice hokey" /></a>
            <a class="loadnew" href="loadcontent/luge.html"><img class="zoom" src="images/luge.png" alt="luge" /></a>
            <a class="loadnew" href="loadcontent/skating.html"><img class="zoom" src="images/skating.png" alt="skating" /></a>
        </div>
    </nav>

    <div id="contentwrapper">
        <div id="ajax-main">
            Shit
        </div>
    </div>

    <footer>
    </footer>

    <script type="text/javascript">
        $(function() { //ready function
            $(".zoom").hover( zoomIn );
            $(".zoom").mouseout( zoomOut );
            $(".zoom").click( select );

            //ajax load of main div content specified in links  
            // attaching click handler to links
            $("#wrapper, #ajax-main").on("click", "a.loadnew", function(e) {
                // cancel the default behaviour
                e.preventDefault();

                // getting the desired element for working with it later
                var $wrap = $('#ajax-main');

                $wrap.html('')
                    // slide it up
                    .slideUp();

                // load address of the link    
                $.get($(this).attr('href'), function(resp) {
                    $wrap.html(resp);
                    $wrap.slideDown();
                });
            });
        });

        function zoomIn() {
           $(this).animate({
                left:'10px',
                height:'190px',
                width:'190px',
            });
            $(this).css({"border-radius": "110px"});
        }

        function zoomOut() {
            $(this).animate({
                left:'-10px',
                height:'140px',
                width:'140px'
            });
            $(this).css({"border-radius": "90px"});
        }

        function select() {
            $(this).css({"border":"8px #e53cc7 solid", "border-radius": "110px"});
            $(".zoom").not(this).css({"border":"none"});
        }

        function getRandom(num){
            var my_num = Math.floor(Math.random()*num);
            return my_num;
        }
    </script>
</body>
</html>
相关问题
最新问题