gpt4 book ai didi

jquery-ui .tabs ajax加载页面的特定内容?

转载 作者:行者123 更新时间:2023-12-01 02:50:45 24 4
gpt4 key购买 nike

我尝试使用 jQuery UI 的 .tabs() 通过 AJAX 获取内容,但默认行为是获取整个页面的内容。 如何从特定#id 和/或多个#id 获取内容?

我有一种感觉,我需要使用 load: 事件 ( http://docs.jquery.com/UI/Tabs#event-load ),但是我需要帮助来解决这个问题

示例:

带有选项卡的页面,用于获取和显示选项卡式内容。我已将 #content 放置在要检索的第一个 #the_tabs 链接之后,试图获取内容的特定区域,但整个页面仍会加载。

<div id="tabs">

<div id="tabs_display">

</div>

<ul id="the_tabs">
<li><a href="testcontent.html#content" title="tabs display"><span>1</span></a></li>
<li><a href="testcontent2.html" title="tabs display"><span>2</span></a></li>
<li><a href="testcontent.html" title="tabs display"><span>3</span></a></li>
<li><a href="testcontent2.html" title="tabs display"><span>4</span></a></li>
</ul>

</div><!-- /#tabs -->

通过先前的标记检索的页面:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Remote HTML Page Example</title>
</head>
<body>
<div id="content">
I want this content
</div>
<div id="other_stuff">
Not this content
</div>
</body>
</html>

JS(用于设置目的):

$(document).ready(function(){

/* Tabs
--------------------*/
$(function() {

var $tabs = $('#tabs').tabs({

});

});

});

最佳答案

在 Jquery-UI 1.9 中,“ajaxOptions”已被弃用;所以下面的代码对我有用:(引用:http://jqueryui.com/upgrade-guide/1.9/#deprecated-ajaxoptions-and-cache-options-added-beforeload-event)

$(function() {
$( "#the_tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.ajaxSettings.dataType = 'html';
ui.ajaxSettings.dataFilter = function(data) {
return $(data).filter("#content").html();
};
}
});
});

关于jquery-ui .tabs ajax加载页面的特定内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1549244/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com