javascript - 单击 jquery 加载 html 模板

Question

有主 html 模板和子 html 模板。

<button id="btn">Click Me...</button>

主要 HTML:

<div id="main">
 <label>Main</label>
</div>

子 HTML:

<label>sub</label>

JQuery:

$(document).on("click", "#btn", function(e) {
            e.preventDefault();
            $("#main").load("main.html");


        });

尝试实现的场景是我在所有页面中有一个通用按钮。在默认页面即 Main.html 中，我将显示其标签。单击按钮后，我想用 sub.html 替换 main.html 的标签，再次单击按钮时，我需要使用默认标签切换它。

谁能帮我解决这个问题。

Answer 1

我认为这个Fiddle是OP想要实现的目标

加载 html 文件:

var loadMain = true;
var loadSub = false;
$(document).on("click", "#btn", function(e) {
            e.preventDefault();
    if(loadMain){
            $("#main").load("main.html");
        alert("HERE");
            loadSub = true;
            loadMain = false;
    }else{
         $("#main").load("sub.html");
        alert("THERE");
            loadMain = true;
            loadSub = false;
    }

});