2009-08-31 7 views
4

jQueryのタブとAjaxを頻繁に使用するプロジェクトに取り組んでいます。タブにデータをロードするのは簡単ですが、タブ内のデータはタブdivの外側にある選択ボックスでフィルタリングする必要があります。jQuery-UIタブからターゲットURLを取得する

ここに私の問題が始まります。私のタブがAjaxのURL「tab1.html」を呼び出すとします。 jQueryのタブは「#のUI-タブ-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。君たちは最高です。

答えて

8

以下は、hrefをコンソールに書き出します。タブリンクにAJAXタブのhrefのhere

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

からURLをしたいタブのゼロベースのインデックスです。ありがとうございました! – rtperson

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したがって、あなたが

$("#First_tab_contents") 

乾杯のようなものを使用してdiv要素にアクセスすることができるはず、アンダースコアに置き換えられた空間で、タイトルに基づいてIDを持つdivを作成します!

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

tabnumあなたは私が探していたまさにでした

関連する問題