Fatal编程技术网
  • jquery/
  • 通过JQuery在div中加载HTML文件时出现问题 $（函数（）{ $（“.authNav”）。单击（函数（）{ $（“#容器”）.hide（）； $（“#auth”）.show（）； $（“#auth”）.load（“author.html”）； }); });

通过JQuery在div中加载HTML文件时出现问题 $（函数（）{ $（“.authNav”）。单击（函数（）{ $（“#容器”）.hide（）； $（“#auth”）.show（）； $（“#auth”）.load（“author.html”）； }); });

jquery html

通过JQuery在div中加载HTML文件时出现问题 $（函数（）{ $（“.authNav”）。单击（函数（）{ $（“#容器”）.hide（）； $（“#auth”）.show（）； $（“#auth”）.load（“author.html”）； }); });,jquery,html,Jquery,Html,第一组 我还是一个初学者，这是我在学校的项目代码。我已经有很多代码了，但是我特别选择了这个我有问题的地方。你看，我编写了一个脚本，通过使用JQuery隐藏div容器并显示div AUTH。但是结果只是隐藏了div容器，而没有在div AUTH上显示任何内容。我的代码放错了吗？我尝试将脚本放在head标签上，但也不起作用。更改为 <html> <body> <ul class ="mainMenu">

第一组

我还是一个初学者，这是我在学校的项目代码。我已经有很多代码了，但是我特别选择了这个我有问题的地方。你看，我编写了一个脚本，通过使用JQuery隐藏div容器并显示div AUTH。但是结果只是隐藏了div容器，而没有在div AUTH上显示任何内容。我的代码放错了吗？我尝试将脚本放在head标签上，但也不起作用。

更改为

<html>
    <body>
           <ul class ="mainMenu">
                <li><a class ="authNav" href ="#">AUTHOR</a></li>
            </ul>
            <script>
                $(function() {
                    $(".authNav").click(function(){
                        $("#container").hide();
                        $("#auth").show();
                        $("#auth").load("author.html"); 
                    });
                }); 
            </script>

        <div id ="container">
            <p>FIRST DIV</p>
        </div>

        <div id ="auth">
        </div>
    </body>
</html>

    

  • 

    • 


第一组

$（文档）.ready（函数（）{
$（“#auth”）.hide（）；
$（“.authNav”）。单击（函数（）{
$（“#容器”）.hide（）；
$（“#auth”）.show（）；
$（“#auth”）.load（“author.html”，函数（响应、状态、xhr）{
如果（状态=“错误”）
{   
警报（状态）；
}
否则{
警惕（“完成”）；
}
}); 
});
});
示例：
您的index.html页面应该是这样的

<ul class="mainMenu">
    <li>
        <a class="authNav" href="#">AUTHOR</a>
    </li>
</ul>

<!-- Container -->
<div id="container">
    <p>FIRST DIV</p>
</div>

<div id="auth">
    <!-- Auth table -->
</div>

<script>
    $(document).ready(function() {
        $("#auth").hide();

        $(".authNav").click(function() {
            $("#container").hide();
            $("#auth").show();
            $("#auth").load("author.html", function( response, status, xhr ) {
                if (status == "error") 
                {   
                    alert(status);
                }
                else {
                    alert("done");
                }
            }); 
        });
    });
</script>



    

  • 

    • 


第一组

$（文档）.ready（函数（）{
$（“.auth”）.hide（）；
$（“.authNav”）。单击（函数（）{
$（“.container”）.hide（）；
$（“.auth”）.show（）；
$（“.auth”）.load（“author.html”，函数（）{
警报（“成功消息”）；
});
});
});
您的author.html页面应该是这样的。不带头体标记

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--this JS is for Jquery-->
        <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    </head>
    <body>
        <ul class="mainMenu">
            <li>
                <a class="authNav" href="#">AUTHOR</a>
            </li>
        </ul>

        <!-- Container -->
        <div class="container">
            <p>FIRST DIV</p>
        </div>

        <div class="auth">
        </div>

        <script>
            $(document).ready(function() {
                $(".auth").hide();

                $(".authNav").click(function() {
                    $(".container").hide();
                    $(".auth").show();
                    $(".auth").load("author.html", function() {
                        alert("Success Message");
                    });
                });
            });
        </script>
    </body>
</html>


此内容已加载到form author.html页面
author.html文件和jquery文件应与index.html文件位于同一文件夹中，否则必须更改这些路径。



<div>
    This content Loaded form author.html page
</div>



    

  • 


$（函数（）{
$（“.authNav”）。单击（函数（）{
$（“#容器”）.hide（）；
$（“#auth”）.show（）；
});
}); 
第一组

谢谢你们帮我找到答案：）j query.load对我来说确实是一个错误，我没有时间使用开发者控制台调试它，所以我使用了tag并经历了一系列的尝试和错误，瞧！如果你想改进我的代码，我愿意接受建议。谢谢谢谢你

你是否检查了开发者模式/firebug的网络选项卡以查看ajax请求发生了什么？查看我的代码…还记得执行
$（“.authNav”）。单击（函数（e）{e.preventDefault）；
查看控制台（F11）要查看您是否实际获取了任何数据，例如，如果author.html不可用，它将失败。仍然没有更改。我尝试将“authNav”类更改为id，但仍然没有任何作用。我还添加了“”但是什么也没发生。我知道这段代码在我收到回调函数后工作。你的代码工作了！但是它没有显示html文件。我猜是html文件内容出错了。它应该包含并且也应该包含吗？在这里尝试我添加的调试代码。基本上它会告诉你是否有问题。非常感谢你，我能够ix错误：）而我在a中使用了，所以它起作用了：）那么它意味着，对于我的index.html，它应该包含到then.when的，而对于“author.html”它可以只包含？@AngelicaRosimoMarcelino-是的。因为您正在将该html文件插入到一个已经有和标记的html页面中。所以无需。只需尝试一下，它就可以100%正常工作；）谢谢您SOO MUUUCH！：） 
<html>
<body>
       <ul class ="mainMenu">
            <li><a class ="authNav" href ="#">AUTHOR</a></li>
        </ul>
        <script>
            $(function() {
                $(".authNav").click(function(){
                    $("#container").hide();
                    $("#auth").show();
                });
            }); 
        </script>

    <div id ="container">
        <p>FIRST DIV</p>
    </div>

    <div id ="auth">
      <object style ="height: 100%; width: 100%;" type ="text/html" data ="author.html"></object>
    </div>
</body>