Question

$('#menuhome').click(function(){
            $('#leftcolumncontainer').load('pages/homemenu.php');

        });

以上将自动加载主页菜单就好了..现在我想添加这个

 $('#menuhome').click(function(){
                $('#middlcolumncontainer').load('pages/homecontent.php');

            });

上面的代码将在中间加载家庭内容

我想要实现的是当我点击按钮时主页菜单将在左侧加载，而主页内容将加载到中心..但是当我单击按钮时，内容加载到中心并且在左边所以我试过这样的事情

$('#menuhome').click(function(){
                $('#leftcolumncontainer').load('pages/homemenu.php');
                $('#middlcolumncontainer').load('pages/homecontent.php');
            });

同样的事情发生了我的问题是如何用这段代码实现我想要的东西

"UPDATE"

$.when($('#leftcolumncontainer').load('pages/homemenu.php', $('#middlcolumncontainer').load('pages/imagegallerycolumn.php'))).done(function(x){
            return(x);

        });

这是我正在处理的代码

更新

$('a.menuhome').click(function(e) {
                 $.when($('#leftcolumncontainer').load('pages/homemenu.php')).then(function() {
            $.ajaxSetup({
                url: "pages/homecontent.php",
                success: function(result) {
                    $("#middlcolumncontainer").html(result);
                }
            });
            $.ajax();
                  });});

这是我使用的新代码，这里唯一的问题是middlecontainer不加载homecontent

homecontent页面：

<div id="middlecontainerimagegallerycolumn" >
    <div id="imagegallerycorner">
        <div id="bigimage_container"></div>
        <div id="bigimage_description"></div>
        <div id="carousel_container">
        <div id="left_scroll"><img src='images/left.png' /></div>
        <div id="carousel_inner">
        <ul id="carousel_ul" >
        <li><a href='#'><img src='images/image1.jpg' id="1"/></a></li>
        <li><a href='#'><img src='images/image2.jpg' id="2"/></a></li>
        <li><a href='#'><img src='images/image3.png' id="3"/></a></li>
        <li><a href='#'><img src='images/image4.jpg' id="4"/></a></li>
        <li><a href='#'><img src='images/image5.jpg' id="5"/></a></li>
        <li><a href='#'><img src='images/image6.png' id="5"/></a></li>
        <li><a href='#'><img src='images/image7.png' id="5"/></a></li>
        <li><a href='#'><img src='images/image8.png' id="5"/></a></li>
        </ul>
        </div>
        <div id='right_scroll'><img src='images/right.png' /></div>
        </div>

    </div>
</div>

JS：

$("#bigimage_container").ready(function() {
        document.getElementById("bigimage_container").style.background = 'url('+$('#carousel_ul li:first img').attr("src") +') ';
        document.getElementById("bigimage_container").style.backgroundPosition = "center center";
        document.getElementById("bigimage_container").style.backgroundRepeat = "no-repeat";
        document.getElementById("bigimage_container").style.backgroundSize = "100% 100%";
        document.getElementById("bigimage_description").innerHTML = $('#carousel_ul li:first img').attr("src");
        });
    $(document).ready(function() {
        //move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
        $('#carousel_ul li:first').before($('#carousel_ul li:last'));


        //when user clicks the image for sliding right        
        $('#right_scroll img').click(function() {
            document.getElementById("bigimage_container").style.background = 'url(' + $('#carousel_ul li:nth-child(3) img').attr("src") + ') ';
            document.getElementById("bigimage_description").innerHTML = $('#carousel_ul li:nth-child(3) img').attr("src");
            //alert($('#carousel_ul li:nth-child(2) img').attr("src"));
            document.getElementById("bigimage_container").style.backgroundPosition = "center center";
            document.getElementById("bigimage_container").style.backgroundRepeat = "no-repeat";
            document.getElementById("bigimage_container").style.backgroundSize = "100% 100%";
            //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
            var item_width = $('#carousel_ul li').outerWidth() + 10;

            //calculate the new left indent of the unordered list
            var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;

            //make the sliding effect using jquery's anumate function '
            $('#carousel_ul:not(:animated)').animate({
                'left': left_indent
            }, 100, function() {

                //get the first list item and put it after the last list item (that's how the infinite effects is made) '
                $('#carousel_ul li:last').after($('#carousel_ul li:first'));

                //and get the left indent to the default -150px
                $('#carousel_ul').css({
                    'left': '-150px'
                });


            });
        });

        //when user clicks the image for sliding left
        $('#left_scroll img').click(function() {
            document.getElementById("bigimage_container").style.background = 'url(' + $('#carousel_ul li:first img').attr("src") + ') ';
            document.getElementById("bigimage_description").innerHTML = $('#carousel_ul li:first img').attr("src");
            document.getElementById("bigimage_container").style.backgroundPosition = "center center";
            document.getElementById("bigimage_container").style.backgroundRepeat = "no-repeat";
            document.getElementById("bigimage_container").style.backgroundSize = "100% 100%";
            var item_width = $('#carousel_ul li').outerWidth() + 10;

            /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
            var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;

            $('#carousel_ul:not(:animated)').animate({
                'left': left_indent
            }, 100, function() {

                /* when sliding to left we are moving the last item before the first list item */
                $('#carousel_ul li:first').before($('#carousel_ul li:last'));

                /* and again, when we make that change we are setting the left indent of our unordered list to the default -150px */
                $('#carousel_ul').css({
                    'left': '-150px'
                });
            });


        });

    });

Answer 1

您需要检查加载的异步行为，working fiddle 会帮助你

代码段：

$('#menuhome').click(function(){
    $.when($('#leftcolumncontainer').load('http://fiddle.jshell.net/webdevem/JfcJp/show/')).done(function(x){
    $('#middlcolumncontainer').load('http://www.yahoo.com');
});
});

请注意，www.yahoo.com不会因为跨站点脚本而加载，但在控制台中你会知道它试图加载这个url而不是顶部的

Answer 2

load()只是$.get的一个快捷方式，可以自动将加载的内容插入到DOM中，只要内容准备就绪，它就会这样做。

要加载两个页面的内容并同时插入两个页面，我们必须远离load()并使用$.get，以便我们可以在两个页面都有内容时手动插入内容装载

$('#menuhome').click(function(){
    $.when(

        $.get('pages/homemenu.php'),
        $.get('pages/homecontent.php')

    ).done(function(menuData, contentData) {

        $('#leftcolumncontainer').html(menuData.shift());
        $('#middlcolumncontainer').html(contentData.shift());

    });
});

这两次都是ajax调用，只有当两者都成功并且已经完成时，才会在两个元素中同时插入内容。

Answer 3

就像这样：

$('#menuhome').click(function() {
   $('#leftcolumncontainer').load($(this).attr('pages/homemenu.php'));
   $('#middlecolumncontainer').load('pages/homecontent.php');
   return false;
});

看看这个Stackoverflow

Answer 4

给这一点强制连续加载资源：

$(function(){$('#menuhome').click(function(){
    $('#leftcolumncontainer').load('pages/homemenu.php', function(){
        $('#middlcolumncontainer').load('pages/homecontent.php');
    });
})});

但是，您不清楚为什么要观察自己的行为。据我所知，它应该像你期望的那样工作。减少测试用例有助于消除任何环境因素......

Answer 5

你的第一次尝试应该只是工作，假设你可以同时加载两个内容并在它们可用时插入它们。

$('#menuhome').click(function(){
    $('#leftcolumncontainer').load('pages/homemenu.php');
    $('#middlecolumncontainer').load('pages/homecontent.php');
});

DEMO

我认为由于拼写错误，中间内容可能无法加载。你写的#middlcolumncontainer没有e。

否则，它可能是同一个原始政策问题。您是在Web服务器上还是在本地文件系统上进行测试？

编辑：

让我们回到基础。以下适用于我的文件系统。

的index.html

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
    <div>
        <div id="left"></div>
        <div id="middle"></div>
        <input type="button" id="menuhome" value="menu home" />
    </div>
    <script>
        $(function() {
            $('#menuhome').click(function() {
                $('#left').load('pages/menu.html');
                $('#middle').load('pages/content.html');
            });
        });
    </script>
</body>
</html>

页/ menu.html

<div>menu</div>

页/ content.html

<div>content</div>

在点击1按钮的同时在2个不同的div中同时加载2页

5 个答案: