我正在尝试使用 jQuery UI 的 .tabs() 通过 AJAX 获取内容,但默认行为是抓取整个页面的内容。如何从特定的#id 和/或多个#id 获取内容?
我有一种感觉,我需要使用该load:
事件 ( http://docs.jquery.com/UI/Tabs#event-load ),但我需要帮助来解决这个问题。
例子:
带有选项卡的页面正在获取和显示选项卡式内容。我在第一个 #the_tabs 链接之后放置了#content,以尝试获取内容的特定区域,但仍会加载整个页面。
<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({
});
});
});