JqueryのUIタブ - タブの選択ページの別の部分のDIVコンテンツの切り替え

Question

JqueryのUIタブを使用して、特定のタブが選択されたときに別のdivの表示/非表示を試みています。タブアクションはページのメインコンテンツdivにありますが、divはサイドバーに表示されます。 ＃タブ-1が選択されている場合

  <div id="tabs"> 
      <ul> 
      <li><a href="#tabs-1">tab 1</a></li> 
      <li><a href="#tabs-2">tab 2</a></li> 
      </ul> 

      <div id="tabs-1"> 
      Tab 1 Content 
      </div> 

      <div id="tabs-2"> 
      Tab 2 Content 
      </div> 

      </div> 


      <div id="sidebar"> 

      <div id="tabs1show">This is "#sidebar tabs1show ... 1</div> 
      <div id="tabs2show">This is "#sidebar tabs2show"... 2</div> 
      </div> 

が、私は＃のtabs1showコンテンツがサイドバーに表示したいと思います：

は、ここに私のコードです。 ＃tabs-2を選択すると、＃tabs1show divが非表示になり、＃tabs2showコンテンツがサイドバーに表示されます。 "$ tabs = $（ '＃tabs'）。tabs（）;"にアクションをリンクするための表示/非表示（おそらく）の組み合わせを入れなければならないことは分かっていますが、そうするために。私はjqueryに比較的新しいですので、どんな助けでも大歓迎です。

ありがとうございます。

Answer 1

「秘密」はあなたのhtmlに追加したクラスです。あなたがそれらのサイドバーパネルをターゲットにしたいものは何でもしてください。

jsFiddle

Answer 2

このようにすることができますhttp://jsfiddle.net/gurkavcu/ZcHvV/。

おそらく、どのタブが選択されているかを検出する良い方法がありました。

他の代替：

ui.tab.panel.id == "タブ-1" & & ui.tab.panel.id == "タブ-2"

ui.index ==

$('#tabs').tabs({ 
    select: function(event, ui) { 
     $('.secret').hide().eq(ui.index).show(); 
    } 
}); 

：あなたは誰かがタブを選び '選択' イベント、にフックすることができます0 & & ui.index == 1