2

我设置了 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工作的任何线索？

提前致谢！

4

2 回答 2

2

允许加载响应的部分代码的函数是 $.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;
});

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

祝你好运

于 2012-12-14T05:24:02.517 回答
0

得到了解决方案:) 使用其中一个答案作为参考点，选项卡现在可以加载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;
}
});
});
于 2012-12-15T07:42:17.850 回答