隱藏並顯示JQuery UI標籤

Question

我正在使用jQuery UI標籤，並且工作得很好，現在我想隱藏並顯示如下所示的單擊按鈕。

在每個選項卡上我有一個按鈕，當我點擊它時，它應該隱藏當前選項卡和其他選項卡，並應顯示給我下一個選項卡（即..如果我在選項卡1上，並且如果我單擊按鈕它應該向我顯示標籤-2，並且應該隱藏1,3和4個標籤），並且類似地爲2,3,4個標籤。

這是我的意思嗎？

那麼，如何做到這一點？

這裏是我的代碼： 腳本：

<script> 
    $(function() { 
     $("#tabs").tabs(); 
    }); 
</script> 

的CSS：

<style type="text/css"> 
    #tabs { width: 700px; } 
    </style> 

標籤：

<div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">TAB1</a></li> 
    <li><a href="#tabs-2">TAB2</a></li> 
    <li><a href="#tabs-3">TAB3</a></li> 
    <li><a href="#tabs-4">TAB4</a></li> 
    </ul> 
    <div id="tabs-1"> 
    <p></p> 
    </div> 
    <div id="tabs-2"> 
    <p></p> 
    </div> 
    <div id="tabs-3"> 
    <p></p> 
    <p></p> 
    </div> 
</div> 

Answer 1

我找到了解決我的問題在這裏http://beta.kilbot.com.au/labs/jquery/add-remove-tabs-using-jquery/

Answer 2

的jQuery上有網站UI說，這樣做的正確的jQuery的語法是有

<script> 
    $(function() { 
     $("#tabs").tabs(); 
    }); 
</script> 

Answer 3

我相信下面的代碼片段應該做你想做的。

$("#button_id").click(function() { 
    $("#tabs").tabs('select', 'tab_index'); 
}); 

Tab_index應該是一個整數，它指定標籤的位置（從零開始），所以在這裏你會通過在一個或下一個標籤的位置。 你可以retrieve the current tab index如下：

var $tabs = $('#example').tabs(); 
var selected = $tabs.tabs('option', 'selected'); 

我建議你看看.tabs() select method的文檔。