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;
    }

});

Answer 2

您可以使用jquery更改标签文本：试试这个：

$(document).on("click", "#btn", function(e) {

            $("#main").load("main.html");

        if ($("#expanderSign").text() == "Main"){
            $("#expanderSign").html("sub")
        }
        else {
            $("#expanderSign").text("Main")
        }

        });

http://jsfiddle.net/wcd7N/

Answer 3

这里是您的代码的小提琴：

$(document).on("click", "#btn", function (e) {
  e.preventDefault();
  $("#main").load("/echo/html/", {html: "<label>sub</label>"});
});

http://jsfiddle.net/cnnhg/2/

与您的唯一区别是您不需要该数据参数，您使用的是文件。还有其他问题，比如在按钮准备好之前添加onclick。

在点击jquery上加载html模板

3 个答案: