我设置了 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 工作有任何线索吗？
提前致谢!
最佳答案
允许加载响应的部分代码的函数是 $.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 参数。
祝你好运
关于jquery-ui - jQuery UI 选项卡 : How do I load a specific element from a different page?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13872543/