Question

我有一个用于选项卡选择更改的监听器，并且希望能够在每次单击选项卡时加载div元素中的内容：但是，以下仅适用于第一次。随后单击选项卡，页面（或div区域）为空白。

tabSelectionHandler = function (event, ui) {
    // .... code to get tab that was clicked
    //..code to get URL
    var nextURL = PAGE_URL[tabName];
    $('#' + tabName + 'Content').load(nextURL, function (responseTxt, statusTxt, xhr) {});
}

我希望每次点击标签时都会加载内容，因为内容可能是动态的。我该怎么做？

Answer 1

我是怎么做到这一点的：

假设我有以下HTML：

<div id="tabs">
            <ul>
                <li><a href="#tabs-1">abc</a></li>
                <li><a href="#tabs-2">xyz</a></li>
            </ul>
            <div id="tabs-1"></div>
            <div id="tabs-2"></div>
</div>

然后您可以像这样访问每个标签：

$('#tabs').tabs({
    activate: function (event, ui) {
        var active = $("#tabs").tabs("option", "active");
        var tabId = $("#tabs ul>li a").eq(active).attr('href');
        if (tabId === "#tabs-1") {
           //set url here
           loadHtml(tabId,url );
        } else if (tabId === "#tabs-2") {
            //set url here
            loadHtml(tabId,url );
        } 
    }
});

然后有一个加载内容的javaScript函数：

function loadHtml(id,url){
    $('#'+id).html("some html here"); 
    //you can place an ajax call here or whatever is suitable
    //In your case that would be something like
    //$('#' + id).load(url); 
}

希望有所帮助

无法在div中多次加载html

1 个答案: