Question

我是jquery的新手。我正在尝试创建一个页面，它加载内容而不重新加载页面。在我的测试页面中，我有2个链接，即链接1和链接2.当单击默认页面时。它只是说'你好'。当点击任一链接时，它会说“Hello link1”（如果单击了link1），单击“Hello link2”（当链接2时）。 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>

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

任何人都可以告诉我如何将html页面的名称作为参数传递而不是硬编码或通过标题阅读？

谢谢。

Answer 1

只需删除ready（）和click（）函数，单独保留测试功能

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

PS。实际上当你在jquery中定义一个函数click函数时，函数不能在外面调用，你需要在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>

Answer 2

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

Answer 3

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

filename实际上是事件对象。请查看http://api.jquery.com/click/

此外，在您的代码中：

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

将调用函数test，因此您可以在javascript代码中定义此函数

function test(filename){
    alert(filename)
    // your code here

}

尝试此处的示例http://jsfiddle.net/WUBsq/

有许多更简洁的方法，例如：

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

...

$(document).ready(function(){
    $('a.refresh').click(function(){
        var title = $(this).attr('data-title');
        alert(title);

        // your code here
    })
})

在此尝试：http://jsfiddle.net/WUBsq/3/

使用jquery加载作为参数传递的html文件？

3 个答案: