我正在开发一个大量使用 jQuery 选项卡和 Ajax 的项目。将数据加载到选项卡本身很简单,但选项卡中的数据需要通过位于选项卡 div 之外的选择框进行过滤。
这是我的问题开始的地方。假设我的选项卡对 URL“tab1.html”进行了 Ajax 调用。jQuery 选项卡将此目标更改为类似于“#ui-tabs-10”的哈希值,但我可以通过以下代码获取原始 URL:
$("#tabs").tabs({
select: function(event,ui) {
var url = $.data(ui.tab, 'load.tabs');
...do stuff with url
}
});
但我似乎无法在此事件调用之外访问 ui.tab 对象。所以我的选择框更改事件最终看起来像这样:
var urls = {
0 : "tab1.html",
1 : "tab2.html",
2 : "tab3.html"
}
$('#selectBox').change(function(){
var tabs = $("#tabs").tabs();
var id = $('#selectBox').attr("selectedIndex");
var selectedTab = tabs("option", "selected");
var newUrl = urls[selectedTab] + "?id=" + id;
tabs("url", selectedTab, newUrl);
tabs("load", selectedTab);
});
我的问题是哈希图。我不需要它,它复制了我已经编码到选项卡 div 本身的信息。
<div id="tabs">
<ul>
<li><a href="tab1.html">tab1</a></li>
<li><a href="tab2.html">tab2</a></li>
<li><a href="tab3.html">tab3</a></li>
</ul>
</div>
我已经用尽了 Firebug 中的文档和 DOM 树,但无济于事。关于如何从选项卡事件外部检索 href 的任何想法?
我正在使用 jQuery UI 版本 1.7.2。Muchos gracias 提前。你们是最棒的。