jquery - 如何通过单击链接从另一个文件加载内容？

Question

我有这段代码可以从另一个文件加载内容

$(document).ready(function(){
  $("button").click(function(){
    $("#divA").load("book.html #divB");
  });
});
</script>

<button>Get</button>

这可行，但我需要点击链接而不是按钮

<a href="book.html">Get</a>

根据用户评论

我在页面上有另一个链接。只有特定的链接才能加载内容。

Answer 1

使用锚标记作为选择器并确保停止默认操作。

$(document).ready(function(e){
  $("a#id").on('click',function(){  // $("a#id")  or $("a.class") to target 
                                    //  specific anchors
    e.preventDefault();
    $("#divA").load("book.html #divB");
  });
});

Answer 2

$(document).ready(function(){
  $("a").click(function(e){
    e.preventDefault();
    $("#divA").load("book.html #divB");
  });
});

Answer 3

只需使用a而不是button

$(document).ready(function(){
  $("a").click(function(e){
    e.preventDefault();
    $("#divA").load("book.html #divB");
  });
});

具体a试试这个

$(document).ready(function(){
  $("a#pass_your_id_here").click(function(e){
    e.preventDefault();
    $("#divA").load("book.html #divB");
  });
});

Answer 4

我想你想加载锚href中的url内容

$(document).ready(function(){
  $("a").click(function(e){
    e.preventDefault();
    $("#divA").load($(this).attr("href")+" #divB");
  });
});

Answer 5

我认为这并不难，你可以很容易地做到

$(document).ready(function(){
  $("a").click(function(){
    $("#divA").load("book.html #divB");
  });
});

您也可以分配id给您的a标签，然后执行此操作

<a id="mylink" href="book.html">Get</a>

$(document).ready(function(){
       $("#mylink").click(function(){
       $("#divA").load("book.html #divB");
     });
    });

Answer 6

如果页面上有其他链接，则必须捕获包含链接的 div：

$("#divlinkholder a").click(function(){
    $("#divA").load("book.html #divB");
});

或者你也可以这样做：

$("#divlinkholder a:eq(0)").click(function(){
    $("#divA").load("book.html #divB");
});

:eq 是基于零的索引属性，因此如果您想使用第三个链接加载内容，则索引 0 处的第一个链接将加载内容，然后将其更改为 :eq(2)