如何使用jQuery UI选项卡通过ajax加载外部div

我正在使用Jquery UI选项卡功能通过ajax加载内容。我想在ajax调用中加载特定的div，而不是整个页面。这可能没有使用jQuery的load（）？从代码中可以看到，这是一个股票标准的基本jQuery选项卡实现，但我想要一个特定的div而不是整个页面。如何使用jQuery UI选项卡通过ajax加载外部div

这里是我的html：

<div id="tabs"> 
    <ul> 
     <li><a href="tab-1">Tab One</a></li> 
     <li><a href="tab-2">Tab Two</a></li> 
     <li><a href="http://www.domain.com #target">Ajax tab</a></li> 
    </ul> 

    <div id="tab-1>Tab one content</div> 
    <div id="tab-2>Tab two content</div> 
</div>

而且内嵌脚本：

<script> 
    $(function() { 
     $("#tabs").tabs();  
    }); 
</script>

任何人都知道这是可能的吗？

来源

2011-06-21 Nathan

你是说你需要通过ajax加载标签内的一些内容，但不是标签的全部内容？另外，为什么该选项卡的load（）事件不是一个选项？ – Alvin

我需要通过ajax从远程页面加载内容，但不是整个页面，只有一个div，即#content。我想尽可能不使用load（），但我并不反对这样做。我并不完全确定ajax是否是最好的解决方案，因为我需要为javascript关闭的用户提供回退功能，所以我可能会返回工作的serverside – Nathan

因此，您不希望使用load（）来进行ajax调用，因为你的用户可能关闭了JavaScript？在这种情况下，你可能不应该使用jQuery UI，因为Tabs libaray使用load（）来加载远程内容。就像你说的，如果JavaScript关闭对你来说很重要，你可能会更好地使用服务器端页面。 – Alvin

Nathan。

是的，这是可能的。使用jQuery ajax“加载”功能。例如：

$('#result').load('ajax/test.html #container');

对于您的第三个标签，你应该手动加载通过Ajax调用的内容，也可以定义选择器加载页面的确切部分您需要的。因此，通过常规方式创建第三个标签页，为第三个标签页加载页面内容并创建标签页。或者，当用户单击选项卡时，您可以动态加载第三个选项卡的内容。

更多的信息在这里：http://api.jquery.com/load/，请参阅“加载页面片段”段落。

来源

2013-01-03 10:37:14

如何使用jQuery UI选项卡通过ajax加载外部div

回答

相关问题