Question

我设置了jQuery UI标签，但是我遇到的链接到不同页面的问题是它们将页面的所有内容加载到标签中。这包括我在标签中不需要的页脚，页眉和其他导航栏。如果我只想从该页面加载一个ID怎么办？

我的标签设置方式如下：

<div id="mytabs">
<ul>
 <li><a href="derpsite.com/awesomepage">Awesome page</a></li>
 <li><a href="derpsite.com/foo">Foo</a></li>
</ul>
</div>

jQuery中没有任何进展...

$(function() {
$( "#mytabs" ).tabs();
});

让我们说这是“awesomepage”的html（第一个链接的目标）：

<html>
<head>
<title>awesome page</title>
</head>
<body>
<div id="header">bla</div>
<div id="awesomeness">awesomeness!</div>
<div id="footer">fdsfd</div>
</body>
</html>

...我只希望标签从页面加载#awesomeness。我该怎么做呢？我已经阅读了一些通过向HTML添加data-target="#youridhere"属性来做到这一点的指南，但我仍然对如何实现javascript感到困惑。这似乎是一个方便的解决方案，因为我不会在每个页面中定位相同的ID。关于如何使javascript工作的任何线索？

提前致谢！

Answer 1

允许加载响应的部分代码的函数是$ .load（）函数。不幸的是，tabs（）功能不使用此功能，而是使用$ .ajax。

您可以尝试此解决方案：

您可以尝试停止beforeLoad回调的默认处理，并使用$ .load（）方法管理您的ajax调用。

（根据1.9文档，您可能应该适应）

$('#tabs').tabs({

// Callback run when selecting a tab
beforeLoad: function(event, ui) {

    // If the panel is already populated do nothing
    if (ui.panel.children().size() > 0)
        return false;

    // Make your own ajax load (with fragment feature)
    ui.panel.load(ui.tab.attr('href') + ' #yourFragment');

    // stop the default process (default ajax call should not be launched)
    return false;
});

注意：我不确定用ui.tab.attr('href')提取URL，检查ui.tab对象是什么，但是检索href参数应该很容易。

祝你好运

Answer 2

获得解决方案:)使用其中一个答案作为参考点，选项卡现在可以加载data-target属性中指定的单个元素。这是修改后的版本：

$(function() {
$('#tabs').tabs(
{
beforeLoad: function(event, ui) {
if (ui.panel.children().size() > 0)
    return false;
ui.panel.load($('a', ui.tab).attr('href') + $('a', ui.tab).attr('data-target'));
return false;
}
});
});

jQuery UI选项卡：如何从其他页面加载特定元素？

2 个答案: