代码之家  ›  专栏  ›  技术社区  ›  rtperson

从jQuery UI选项卡获取目标URL

  •  4
  • rtperson  · 技术社区  · 15 年前

    我的问题就从这里开始。假设我的选项卡对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 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,有什么想法吗?

    我使用的是jQueryUI版本1.7.2。请提前告诉我。你们是最好的。

    3 回复  |  直到 15 年前
        1
  •  8
  •   redsquare    15 年前

    下面将把href写入控制台。

    提醒ajax选项卡href的 here

    $('#tabs a').each(function() {
       var href = $.data(this, 'href.tabs');
       console.log(href);
    })
    
        2
  •  5
  •   Gijserman    14 年前
    var links = $("#thetabs > ul").find("li a");
    var url = $.data(links[tabnum], 'href.tabs');
    

    tabnum是要从中获取url的选项卡的从零开始的索引

        3
  •  1
  •   willvv    15 年前

    也可以在选项卡链接中设置标题属性。

    <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为的div,空格替换为下划线,因此您应该能够使用

    $("#First_tab_contents")
    

    干杯