Question

我想在单击按钮时将html文件加载到div中。当我点击“创建”按钮时，它应该加载＆＃39; createarray.html＆＃39;将文件存入div tabcontent。

这是我的html文件：

<div class="tab">
<button class="tablinks" onclick="createarray.html" id= "defaultOpen">Creation</button>
<button class="tablinks" onclick="insertarray.html">Insertion</button>
<button class="tablinks" onclick="deletearray.html">Deletion</button>  
</div>
<div id="Create" class="tabcontent">
</div>
<div id="Insert" class="tabcontent">
</div>
<div id="delete" class="tabcontent">
</div>

这是我的java脚本：

$.ajax({
url : "createarray.html",
dataType: "html",
success : function (data) {
    $("#create").html(data);
}
});
$.ajax({
url : "insertarray.html",
dataType: "html",
success : function (data) {
    $("#insert").html(data);
}
});
$.ajax({
url : "deletearray.html",
dataType: "html",
success : function (data) {
    $("#delete").html(data);
}
});

有人可以帮帮我吗？

Answer 1

您可以使用jQuery的ajax方法，而不是发出load请求。这是文档link。

示例代码

<button class="tablinks" data-url="insertarray.html" data-target="create">Insertion</button>

$(function(){
    $(".tablinks").click(function(){
        var url = $(this).attr("data-url");
        var target = "#" + $(this).attr("data-target");
        $(target).load(url);
    });
});

Answer 2

HTML：

    <div class="tab">
    <button class="tablinks" onclick="createarray()" id= "defaultOpen">Creation</button>
    <button class="tablinks" onclick="insertarray()">Insertion</button>
    <button class="tablinks" onclick="deletearray()">Deletion</button>  
    </div>
    <div id="create" class="tabcontent">
    </div>
    <div id="insert" class="tabcontent">
    </div>
    <div id="delete" class="tabcontent">
    </div>

使用Javascript：

function createarray(){
$.ajax({
url : "createarray.html",
success : function (data) {
    $("#create").html(data);
}
});
}

function insertarray(){
$.ajax({
url : "insertarray.html",
success : function (data) {
    $("#insert").html(data);
}
});
}

function deletearray(){
$.ajax({
url : "deletearray.html",
success : function (data) {
    $("#delete").html(data);
}
});
}

Answer 3

onclick attribute接受Javascript - onclick="createarray.html"等不对。我假设您想要在点击这些按钮时加载HTML。你的Javascript也有点重复，所以我们可以把它放在这样的函数中：

function loadHtml(file){
    $.ajax({
        url : file+"array.html",
        dataType: "html",
        success : function (data) {
            $("#"+file).html(data);
        }
    });
}

虽然我们可以做得更好。它主要复制jQuery加载方法，因此您可以使用它：

function loadHtml(file){
    $("#" + file).load(file + "array.html");
}

然后您可以从onclick属性中调用，如下所示：

<button class="tablinks" onclick="loadHtml('create')" id= "defaultOpen">Creation</button>
<button class="tablinks" onclick="loadHtml('insert')">Insertion</button>
<button class="tablinks" onclick="loadHtml('delete')">Deletion</button>

Answer 4

首先，您使用onclick会导致错误，因为内容应该是有效的JS代码。

要实现您的需求，您可以在button元素上使用不显眼的事件处理程序以及data属性来存储其自定义数据。然后，在事件处理程序中，您可以load()将所需内容添加到给定目标中。试试这个：

<button type="button" class="tablinks defaultOpen" data-url="createarray.html" data-target="#create">Creation</button>
<button type="button" class="tablinks" data-url="insertarray.html" data-target="#insert">Insertion</button>
<button type="button" class="tablinks" data-url="deletearray.html" data-target="#delete">Deletion</button>

$(function() {
  $('.tablinks').click(function() {
    var target = $(this).data('target');
    $(target).load($(this).data('url'));
  });
});

请注意，我将defaultOpen修改为一个类，因为它在语义上更有意义。

Answer 5

$(document).ready(function(){    
  $("#idOfWhereYouClick").click(function(){
  $("#idOfDivWhereYouWantToLoad").load("yourPage.html");
});

如何将外部html文件加载到div中

5 个答案: