4

私は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を取得する方法についてのアイデアはありますか？

jQueryUIバージョン1.7.2を使用しています。事前にMuchosgracias。君たちは最高です。

4

3 に答える 3

8

以下は、hrefをコンソールに書き込みます。

ajaxタブのhrefを警告するデモはこちら

$('#tabs a').each(function() {
   var href = $.data(this, 'href.tabs');
   console.log(href);
})
于 2009-08-31T21:05:16.863 に答える
5 
var links = $("#thetabs > ul").find("li a");
var url = $.data(links[tabnum], 'href.tabs');

tabnumは、URLを取得するタブのゼロベースのインデックスです。

于 2010-05-26T14:32:43.637 に答える
1

タブリンクで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でdivを作成し、スペースはアンダースコアに置き換えられます。したがって、次のようなものを使用してdivにアクセスできるはずです。

$("#First_tab_contents")

乾杯！

于 2009-10-29T16:45:00.267 に答える