Javascript 在jquery中加载作为参数传递的html文件？_Javascript_Jquery_Html

Javascript 在jquery中加载作为参数传递的html文件？

javascript jquery html

Javascript 在jquery中加载作为参数传递的html文件？,javascript,jquery,html,Javascript,Jquery,Html,我是jquery的新手。我正在尝试创建一个页面，该页面在不重新加载页面的情况下加载内容。在我的测试页面中，我有两个链接，即链接1和链接2。单击默认页面时。它只是说“你好”。当点击任何一个链接时，它应该说“Hello link1”（如果点击了link1），“Hello link2”（如果点击了link2）。Link1内容（html）位于Link1.html中，link2内容位于link2.html文件中。无论何时单击任何一个链接，它都应该将链接的html页面的名称作为参数传递。以下是我所做的：

我是jquery的新手。我正在尝试创建一个页面，该页面在不重新加载页面的情况下加载内容。在我的测试页面中，我有两个链接，即链接1和链接2。单击默认页面时。它只是说“你好”。当点击任何一个链接时，它应该说“Hello link1”（如果点击了link1），“Hello link2”（如果点击了link2）。Link1内容（html）位于Link1.html中，link2内容位于link2.html文件中。无论何时单击任何一个链接，它都应该将链接的html页面的名称作为参数传递。以下是我所做的：

<head>
<title>Ajax Practice</title>
<script type="text/javascript" src="scripts/jquery.js"></script> 
<script type="text/javascript">                                         
   $(document).ready(function(){
    $("a").click(function test(filename){
         alert(filename);
         var b = $("a").attr("title");
         alert(b);
         //$('#menuContents').load($(filename)).fadeIn("slow");
         //$('#menuContents').load('link1.html').fadeIn("slow");
         $('#menuContents').load(b).fadeIn("slow");
    });
   });
</script>
</head>

<body>
<div id="page-wrap">
    <div id="menu">
        <a href="javascript:test('link1.html');" title="link1.html">link1</a>
        <a href="#" title="">link2</a>      
    </div>
    <div id="menuContents">
        <h1>Hello!</h1>
    </div>
</div>

</body>
</html>


Ajax实践
$（文档）.ready（函数（）{
$（“a”）。单击（功能测试（文件名）{
警报（文件名）；
var b=$（“a”）.attr（“标题”）；
警报（b）；
//$（'#menuContents'）.load（$（文件名））.fadeIn（“慢”）；
//$（'menuContents'）.load（'link1.html'）.fadeIn（“slow”）；
$（'menuContents'）.load（b.fadeIn（“slow”）；
});
});
你好

问题是，如果我只是将html文件的名称作为参数传递，它不会作为字符串值读取，而是作为对象读取。代码中的第一个警报将发出[object]消息。我可以使用.attr属性读取链接标题中的文本，也可以使用.load属性加载页面。我还可以通过在.load属性中直接指定html页面名称（在代码中注释掉）来更改页面内容

有谁能告诉我如何将html页面的名称作为参数传递，而不是硬编码或读取标题

多谢各位

 $("a").click(function test(filename){

文件名实际上是事件对象。请退房

此外，在代码中：

    <a href="javascript:test('link1.html');" title="link1.html">link1</a>

试试这里的例子

有很多更干净的方法，例如：

<a class="refresh" data-title="link1.html">click here</a>

试试这里：

文件名实际上是事件对象。请退房

此外，在代码中：

    <a href="javascript:test('link1.html');" title="link1.html">link1</a>

试试这里的例子

有很多更干净的方法，例如：

<a class="refresh" data-title="link1.html">click here</a>

请在此处尝试：

只需删除ready（）并单击（）函数，而不使用测试函数

function test(filename){
     alert(filename);
     //$('#menuContents').load($(filename)).fadeIn("slow");
     //$('#menuContents').load('link1.html').fadeIn("slow");
     $('#menuContents').load(filename).fadeIn("slow");
}

事实上，当您在jquery click function中定义一个函数时，该函数不能在外部调用，您需要在gloal中定义测试函数，然后您可以在任意位置调用它，包括a.href

下面有一个很好的方法

    <html>
    <head>
    <title>Ajax Practice</title>
    <script type="text/javascript" src="scripts/jquery.js"></script> 
    <script type="text/javascript">                                         
       $(document).ready(function(){
        $("a").click(function (e){
             $('#menuContents').load($(this).attr('href')).fadeIn("slow");
             e.preventDefault();
             return false;
        });
       });
    </script>
    </head>

    <body>
    <div id="page-wrap">
        <div id="menu">
            <a href="link1.html">link1</a>
            <a href="link2.html">link2</a>      
        </div>
        <div id="menuContents">
            <h1>Hello!</h1>
        </div>
    </div>

    </body>
    </html>


Ajax实践
$（文档）.ready（函数（）{
$（“a”）。单击（功能（e）{
$（'#menuContents'）.load（$（this.attr（'href'））.fadeIn（“slow”）；
e、 预防默认值（）；
返回false；
});
});
你好

只需删除ready（）并单击（）函数，而不使用测试函数

function test(filename){
     alert(filename);
     //$('#menuContents').load($(filename)).fadeIn("slow");
     //$('#menuContents').load('link1.html').fadeIn("slow");
     $('#menuContents').load(filename).fadeIn("slow");
}

事实上，当您在jquery click function中定义一个函数时，该函数不能在外部调用，您需要在gloal中定义测试函数，然后您可以在任意位置调用它，包括a.href

下面有一个很好的方法

    <html>
    <head>
    <title>Ajax Practice</title>
    <script type="text/javascript" src="scripts/jquery.js"></script> 
    <script type="text/javascript">                                         
       $(document).ready(function(){
        $("a").click(function (e){
             $('#menuContents').load($(this).attr('href')).fadeIn("slow");
             e.preventDefault();
             return false;
        });
       });
    </script>
    </head>

    <body>
    <div id="page-wrap">
        <div id="menu">
            <a href="link1.html">link1</a>
            <a href="link2.html">link2</a>      
        </div>
        <div id="menuContents">
            <h1>Hello!</h1>
        </div>
    </div>

    </body>
    </html>


Ajax实践
$（文档）.ready（函数（）{
$（“a”）。单击（功能（e）{
$（'#menuContents'）.load（$（this.attr（'href'））.fadeIn（“slow”）；
e、 预防默认值（）；
返回false；
});
});
你好

如果您使用的是服务器端脚本（如PHP），您可能需要查看jQuery的$.ajax（）

如果您使用的是服务器端脚本（如PHP），您可能至少需要查看jQuery的$.ajax（）

，您需要防止传播，否则href将在$（'a'）之后触发。单击gets calledAt，至少，您需要防止传播，否则href将在$（'a'）之后触发。单击将被调用