我正在开发一个大量使用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>


我已经用尽了文档和DOM Firebug中的树无济于事。关于如何从Tab事件之外检索href的任何想法？

我正在使用jQuery UI版本1.7.2。预先提供了牧草。你们是最棒的。

#1 楼

下面将把href写入控制台。

提醒ajax选项卡的示例href在这里

$('#tabs a').each(function() {
   var href = $.data(this, 'href.tabs');
   console.log(href);
})


评论

那正是我想要的。谢谢！

–rtperson
09年8月31日在21:21

#2 楼

var links = $("#thetabs > ul").find("li a");
var url = $.data(links[tabnum], 'href.tabs');


tabnum是要从中获取网址的标签的从零开始的索引

#3 楼

您还可以在选项卡链接中设置title属性。

<div id="tabs">
    <ul>
        <li><a href="tab1.html" title="First tab contents">tab1</a></li>
        <li><a href="tab2.html" title="Second tab contents">tab2</a></li>
        <li><a href="tab3.html" title="Third tab contents">tab3</a></li>
    </ul>
</div>


这样，JQueryUI将基于标题创建ID为ID的div，并用下划线替换空格，因此您应该可以使用

$("#First_tab_contents")


干杯！访问div。