jQuery UI的標籤 - 選擇標籤還導

頁

的另一部分使用jQuery UI選項卡DIV的內容，我想不同的div顯示/隱藏當選擇一個特定的標籤。 div將位於側欄上，而製表符操作位於頁面的主內容div中。jQuery UI的標籤 - 選擇標籤還導

這裏是我的代碼：

  <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>

當＃標籤-1被選中，我想＃tabs1show內容出現在側邊欄。當選中＃tabs-2時，＃tabs1show div被隱藏，＃tabs2show內容出現在邊欄中。我知道我必須在「$ tabs = $（'＃tabs'）tabs（）;」中加入show/hide（可能）的某種組合來鏈接動作，但我不知道確切的方式這樣做。我相對較新的jquery所以，請，任何幫助將不勝感激。

謝謝。

來源

2012-01-07 runner78

您可以掛接到 '選擇' 事件，當有人拿起一個標籤：

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

'祕密'是我已經添加到你的html的類，做任何你想要的目標側邊欄面板。

jsFiddle

來源

2012-01-07 05:00:00 Sinetheta

太感謝你了！我沒有期待這麼快速的迴應。 – runner78 2012-01-07 05:43:00

你可以像下面這樣做http://jsfiddle.net/gurkavcu/ZcHvV/。

大概已經有更好的方法來檢測選擇了哪個選項卡。

其它替代方案：

ui.tab.panel.id == 「選項卡-1」 & & ui.tab.panel.id == 「選項卡-2」

ui.index == 0 & & ui.index == 1

來源

2012-01-07 04:52:43 Luffy

ui.index給你不索引你連接到HTML – Sinetheta 2012-01-07 05:01:34

jQuery UI的標籤 - 選擇標籤還導

回答

相關問題