0

我正在尝试将特定的 html 文件动态加载到具有单个 onclick 功能的容器 DIV 中，而不是每个按钮一个。

我对此很陌生（这是我第一次使用 AJAX 或 JQuery），这是我迄今为止设法提出的。

$(document).ready(function(){

$("#container").load("home.html");

$("#home").click(function(){
    $("#container").load("home.html");
});
$("#news").click(function(){
    $("#container").load("news.html");
});
$("#about").click(function(){
    $("#container").load("about.html");
});
$("#contact").click(function(){
    $("#container").load("contact.html");
});
});

如您所见，目前我有 4 个具有唯一 ID 的按钮和每个按钮的功能。但我想做的是简化这一点并创建一个函数，该函数获取每个按钮的 ID 并将其用作要加载到容器中的页面的 URL。所以那个 URL = ID + ".html"。

这将帮助我避免在我的投资组合中的每个新条目中添加脚本。

有人对我如何做到这一点有任何想法吗？

谢谢！

4

2 回答 2

0

你可以这样做：

$("#home, #news, #about, #contact").click(function(){ 
    $("#container").load(this.id+".html");
}

但正确的做法是使用属性而不是 id ：

<div link=home>something</div>
...
$("[link]").click(function(){ 
    $("#container").load($(this).attr('link')+".html");
}

这样您就不必在每次添加链接时更改选择器。

于 2012-12-30T11:42:23.557 回答
0

对所有按钮使用一个类：

$(".myButtons").click(
   function(){
   id = $(this).attr("id");
   $("#container").load(id + ".html");  
}
);
于 2012-12-30T11:47:41.030 回答